CSS边框半径背景颜色渗透问题

Question

我遇到了一个问题，当我在元素内部时，带有圆角边框出现了奇怪的溢出/伪影。

我已经看过很多关于类似问题的帖子，但是唯一能解决该问题的建议并不适用于我。这些建议包括：

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

我创建了一个 JSFiddle 来复制这个问题。查看左上角和右上角，您可以看到一些父级黑色背景透出来了。 https://jsfiddle.net/2596n440/ 我该如何解决这个问题？

- jlfama

Answer 1

对于Chrome浏览器来说，该问题在 这里报告。

我怀疑造成问题的原因在所有浏览器中都是相同的：元素被单独裁剪，并且反锯齿会产生模糊效果。

解决方案将基于具体情况进行，目标是消除共享的边界。对于你的示例，可以通过重新排列元素，使它们成为顶部和底部而不是父子级别来解决。如果这不是一个选项，您可能需要调整一下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 */
 }

- Ouroborus