显示在有边界半径的黑匣子的白色角落

Question

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

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

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

Answer 1

因为overflow: hidden;随着border-radius似乎会导致一些发动机的部分呈现不一致(看看这个),应该使用边界半径父和子元素既实现圆角.

正如你已经注意到的那样,你仍会得到一些奇怪的结果,额外的像素"闪耀"通过.只需减少孩子的边界半径(或相反的方向)来弥补这一点.

blockUI .overlay h1 {
    border-radius: 2px 2px 0 0;
}

Answer 2

我有同样的问题。但我解决了。

.blockUI .overlay {background:#000;}

并重做一些！