html - CSS边框半径背景颜色出血

Question

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

我搜索了很多关于类似问题的帖子，我看到的唯一建议似乎对其他人有用，但对我不起作用。建议如下:

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

我创建了一个 JSFiddle 来重现这个问题。查看左上角和右上角，您可以看到 parent 的一些黑色背景透了出来。 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 */
 }