CSS边框半径背景颜色流血

Question

当我有一个元素在内部时，我遇到了围绕半径边界的奇怪流血/伪影的问题。

我已经通过很多关于类似问题的帖子进行了搜索，并且我见过的似乎适用于其他人的唯一建议不适用于我。建议像：

div { 
    background-clip: padding-box; 
    overflow: hidden; 
} 

我已经创建了一个JSFiddle来复制问题。看看左上角和右上角，你可以看到一些父母的黑色背景。 https://jsfiddle.net/2596n440/

我该如何解决这个问题？

Answer 1

对于Chrome，此问题报告为here。

我怀疑原因在各浏览器中是一样的：元素被单独裁剪，并且反锯齿允许出血。

该修复方案将根据具体情况进行修改，目标是移除共享边界。举例来说，重新排列这些元素使它们成为顶部和底部，而不是父母和孩子。如果这不是一个选项，你可能可以去调整CSS一点：

.outer { 
    border-radius: 8px; 
    height: 456px; 
    left: 50%; 
    margin-left: -200px; 
    margin-top: -228px; 
    top: 50%; 
    width: 400px; 
    background-color: black; 
    /*overflow:hidden;*/ /* removed */ 
    z-index: 150; 
    position: fixed; 
} 
.inner { 
    border-radius:8px 8px 0 0; /* added */ 
    width: 400px; 
    height: 300px; 
    background-color: white; 
    position: relative; 
    top:-1px; /* added */ 
}