我得到一个奇怪的效果(目前在铬).我创建了自己的叠加对话框.它有一个半透明的背景,坐在我的网站顶部,上面有一个方框.你可以看到酒吧的顶部有黑色背景.盒子的主要部分是白色的想法.
它不容易看到,但它让我烦恼.
白色从后面显示出来. (我知道好像我把它改成红色就会改变颜色)你可以在屏幕截图的右上角看到,就在“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;
}
