Css 解决办法？边界半径+；背景色+；边框=出血背景

以前似乎已经解决过类似的问题，但我发现的大多数问题都是针对更一般的问题，而这一问题并不适用于今天的大多数浏览器。我遇到了使用

边界半径

与边界和背景（在我的例子中是一种颜色）一起使用时，会导致背景出血超出边界

我想知道是否有一个解决办法，实际上可以掩盖这个问题。。。我尝试过的一些事情：

• 溢出：在父级上隐藏

• 背景剪辑：边框框

• 将.1添加到

  边界半径

这些都不起作用。在我等待你的IE团队解决问题时，是否还有其他解决方法（除了“使用图像”之外）

---

我创建了一个很好地说明了这一点，并详细记录了我的发现。

我以前经历过这一点

我建议改为使用CSS生成的内容设置边框样式，方式如下：

.redcircle::after {
  content:'';
  display:block;
  left:0;
  top:0;
  right:0;
  bottom:0;
  border-radius:100px;
  border:10px solid yellow;
  position:absolute;
  pointer-events: none; //ensures no clicks propogate if this is desired
}

---

您可以在

之前或
之后包装
：：CSS伪
，并将
背景设置为红色在他们身上。将您的宽度、高度和边界半径设置为100%，例如不要将
z-index
更改为-1，您可以看到他获得内部宽度和高度，并且不会出血




Vista上的Explorer 9屏幕截图



比如现在（如果没有z-index播放，它会是什么样子）：


正文{
背景：白色；
}
.蓝盒子{
背景：蓝色；
宽度：200px；
高度：200px；
}
红圈先生{
位置：绝对位置；
左：140像素；
顶部：40px；
文本对齐：居中；
高度：100px；
宽度：100px；
边界半径：100px；
字体大小：100px；
线高：100px；
颜色：黑色；
边框：10px实心黄色；
}
.redcircle：：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
边界半径：100%；
背景：红色；
}

!
借用Zeev的答案，将背景色移动到
：前
或
：后
（只用亚像素间隙代替亚像素出血，并跨越更多浏览器），以及Phil的答案，将
边框移动到
：后
（这并没有真正解决问题）

按照Zeev的建议，将
背景色
移动到
之前的
，但要使其填充等于
边框宽度
减去2（或使用
计算（）
）。然后给它负的
top
和
left
定位相同的数量

然后将
边框
移动到
：之后
，但将其设置为负数
顶部
和
左侧
位置等于
边框宽度

这将创建一个过大的背景，并将其重新居中放置在内容下方。然后，它会创建一个超大边框，并围绕内容居中。您可能会将背景放大到其他度数，并得到相同的结果。关键是使其大于边界内部的孔，但小于边界外部的孔。当然，如果边界很薄，这将失败


正文{
背景：白色；
}
.蓝盒子{
背景：蓝色；
宽度：200px；
高度：200px；
}
红圈先生{
z指数：1；
位置：绝对位置；
左：150px；
顶部：50px；
文本对齐：居中；
高度：100px；
宽度：100px；
边界半径：100px；
字体大小：100px；
线高：100px；
颜色：黑色；
}
.redcircle：：之前，
.redcircle：：之后{
内容：''；
位置：绝对位置；
宽度：100%；
身高：100%；
边界半径：100%；
}
.redcircle：：之前{
z指数：-1；
背景：红色；
顶部：-8px；
左：-8px；
填充：8px；
}
.redcircle：：之后{
顶部：-10px；
左：-10px；
边框：10px实心黄色；
}

!
背景剪辑修复了此问题：

.bluebox {   
   background-clip: padding-box;
}

我在IE中做了进一步的调查，但我找不到一个简单的方法来解决渲染问题。这很有效。它并不漂亮，但也不像我过去为IE使用的其他黑客那么笨重。如果你交叉你的眼睛，你可以从中理解语义。谢谢，Zeev。在我开始实施之后，我发现这只会将一个问题换成另一个问题。现在，背景和边界之间似乎存在亚像素间隙，而不是边界以外的亚像素出血。不过，我想我有一个很好的解决办法，我很快就会发布。你能截图吗？当然。这是你在IE11上运行的代码片段：白色很容易漏掉，但蓝色很容易漏掉。你可以把它弄得更难看，并将calc（100%+1px）添加到宽度和高度，但这是你的选择……欢迎来到StackOverflow。请解释您的代码以及此代码如何解决问题。此外，您还可以使用snippet/fiddle共享代码。