带有边框半径的黑框上显示的白角答案

【问题标题】：White corner showing on black box with Border-radius带有边框半径的黑框上显示的白角
【发布时间】：2013-06-05 11:13:29
【问题描述】：

我得到了一个奇怪的效果（目前在 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;
}

【问题讨论】：

请为白框尝试更大的边框半径（例如 4px）。
您可以从标题中删除边框半径，它应该被overflow:hidden剪切。
@Jayx 理论上是的，但实际上有些引擎仍然会渲染带有overflow: hidden; 和border-radius 的东西。 (tech.bluesmoon.info/2011/04/…)
@kleinfreund 我按照你说的做了，这似乎解决了这个问题。我将 h1 半径减小到 2px，谢谢

标签： overflow css

【解决方案1】：

由于overflow: hidden; 和border-radius 在某些引擎(take a look at this) 中似乎会导致一些渲染不一致，因此应该在父元素和子元素上都使用border-radius 来实现圆角。

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

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

【讨论】：

这当然有帮助，但不幸的是，即使使用这种技术，一些父元素仍然可以通过（至少在 firefox 中）

【解决方案2】：

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

.blockUI .overlay {background:#000;}

然后重新制作一些！

【讨论】：

【解决方案3】：

你应该在父 div 上试试：

-webkit-background-clip: padding-box;

【讨论】：

Bootstrap 已经这样做了：github.com/twbs/bootstrap/blob/v3.3.7/dist/css/…
添加“背景剪辑：上下文框；”解决了我的问题。感谢您的提醒

【解决方案4】：

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

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

【讨论】：