我得到一个奇怪的效果(目前在铬).我创建了自己的叠加对话框.它有一个半透明的背景,坐在我的网站顶部,上面有一个方框.你可以看到酒吧的顶部有黑色背景.盒子的主要部分是白色的想法.
它不容易看到,但它让我烦恼.
白色从后面显示出来. (我知道好像我把它改成红色就会改变颜色)你可以在屏幕截图的右上角看到,就在“X”的正上方
标题和框的边框半径均为3px
.blockUI .overlay { background: #f00; border-radius: 3px; margin: 0 auto; padding: 10px; overflow: hidden; position: relative; top: 20%; text-align: inherit; width: 600px; z-index: 10009; } blockUI .overlay h1 { background: #000; border-bottom: 2px solid #F48421; border-radius: 3px 3px 0 0; color: #FFF; font-family: 'Roboto',sans-serif; font-weight: 300; margin: -10px; padding: 10px; }
解决方法
溢出:隐藏;与border-radius一起似乎会导致某些引擎
(take a look at this)中的渲染不一致,应该在父元素和子元素上使用border-radius来实现圆角.
正如你所注意到的那样,你仍会得到一些奇怪的结果,额外的像素“闪耀”通过.只需减少孩子的边界半径(或相反的方向)来弥补这一点.
blockUI .overlay h1 { border-radius: 2px 2px 0 0; }
原文地址:https://www.jb51.cc/css/215476.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。