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 */
 }

CSS边框半径背景颜色出血

1 个答案: