css – 白色角落显示在黑色框与边界半径

我得到一个奇怪的效果(目前在铬).我创建了自己的叠加对话框.它有一个半透明的背景,坐在我的网站顶部,上面有一个方框.你可以看到酒吧的顶部有黑色背景.盒子的主要部分是白色的想法.

它不容易看到,但它让我烦恼.

白色从后面显示出来. (我知道好像我把它改成红色就会改变颜色)你可以在屏幕截图的右上角看到,就在“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;
}