CSS边框半径背景颜色出血 [英] CSS border radius background colour bleed

问题描述

当我内部有一个元素时，我在边界半径周围出现奇怪的出血/伪影感到很麻烦。

I'm having troubles with weird bleed/artifacts around a border radius when I have an element inside.

我在很多帖子中搜索了类似的问题而且我所看到的似乎对其他人有用的唯一建议对我没有用。建议如下：

I have searched through a lot of posts about similar problems and the only recommendations I've seen, that seem to work for others, aren't working for me. Recommendations like:

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

我创建了一个JSFiddle来复制问题。查看左上角和右上角，您会看到父母的一些黑色背景透出。
https://jsfiddle.net/2596n440/

I've created a JSFiddle to replicate the problem. Look at the top left and right corners and you can see some of the parent's black background showing through. https://jsfiddle.net/2596n440/

我该如何解决？

推荐答案

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

For Chrome, this issue is reported here.

I怀疑跨浏览器的原因是相同的：元素被单独裁剪，并且抗锯齿允许流血。

I suspect the cause is the same across browsers: the elements are being cropped separately and the anti-aliasing allows bleed.

解决方案将视情况而定，删除共享边界的目标。对于您的示例，可能需要重新排列元素，使其成为顶部和底部，而不是父级和子级。如果不是这样，则可以稍微调整一下CSS：

The fix would be on a case by case basis with the goal of removing the shared perimeter. For your example, it would be matter of rearranging the elements such that they are a top and bottom rather than a parent and child. If that's not an option, you might be able to go with adjusting the CSS a bit:

.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边框半径背景颜色出血的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！