overflow - 带有边框半径的黑框上显示的白角

Question

我得到了一个奇怪的效果（目前在 chrome 中）。我创建了自己的叠加对话框。它有一个半透明的背景，位于我的网站顶部，顶部有一个框。如您所见，栏的顶部有黑色背景。盒子的主要部分是白思。

它不是很容易看到，但它让我很烦。

白色从后面显露出来。（我知道如果我把它改成红色它会改变颜色）你可以在截图的右上角看到，就在“X”的上方

header 和 box 的边框半径都是 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;withborder-radius似乎会在某些引擎中导致一些渲染不一致（看看这个），因此应该在父元素和子元素上使用border-radius来实现圆角。

正如您所注意到的，您仍然会得到一些奇怪的结果，额外的像素“闪耀”通过。只需减小孩子的边界半径（或相反）来补偿这一点。

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

Answer 2

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

.blockUI .overlay {background:#000;}

并重新制作一些！

Answer 3

您应该尝试使用父 div：

-webkit-background-clip: padding-box;

Answer 4

最后通过在父子 div 上添加这个来完全解决这个问题。

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
outline:none;
border:none;
text-decoration:none;