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

Question

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

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

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

header和box的border radius都是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 似乎在某些引擎中导致渲染不一致 (take a look at this) ，应该在父元素和子元素上都使用 border-radius 来实现圆 Angular 。

正如您所注意到的，您仍然会得到一些带有额外像素“闪耀”的奇怪结果。只需减少 child 的边界半径(或相反)来补偿这一点。

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