Css 重叠环出血

我有一个

position:relative

绿色圆环，上面有一个

position:absolute

红色克隆

：前面有一个
position:absolute
白色克隆
：后面有一个
白色克隆
：后面有一个
绿色圆环，它覆盖了两者（因为它们位于同一位置，大小相同）

问题在于：在经过测试的两种浏览器（Chrome和Firefox）上，它都呈现出不好的效果，我仍然可以看到白色遮罩下的绿色/红色光环。让
溢出的绿色环：隐藏
部分修复问题，移除外部出血；但内部出血边界仍然存在

为什么会发生这种情况？我如何完全隐藏较低的圆圈



正文{
背景：薰衣草；
}
#戒指{
位置：相对位置；
宽度：100px；
高度：100px；
边界半径：50%；
边框：50px纯绿；
}
#铃声：以前{
内容：''；
位置：绝对位置；
顶部：-50px；
左：-50px；
宽度：100px；
高度：100px；
边框：50px纯红；
边界半径：50%；
}
#铃声：之后{
内容：''；
位置：绝对位置；
顶部：-50px；
左：-50px；
宽度：100px；
高度：100px；
边界半径：50%；
边框：50px纯白；
}
在径向进度条场景中，您可以使用此处描述的方法：。使用进度条属性并设置其动画。

根据您的用例进行调整，它可以如下所示：


body{背景：薰衣草；}
svg{宽度：200px；高度：200px；}
问题的原因是限制（边界）像素的抗锯齿。为了使圆的边界不太像素化，仅在圆内一半的像素被渲染为半透明

问题是，顶部圆下方的圆也在渲染半透明像素。（当然是另一种颜色）。因此，半透明白色在半透明红色的顶部渲染（即在半透明绿色的顶部渲染）

最终的结果是像素不是纯白色的

要解决问题的根源，您需要关闭抗锯齿功能，即AFAIK不能使用边框（仅文本和正在显影的图像）。此外，这样的解决方案会让这个圈子变得相当丑陋

为了缓解这一问题，您可以通过大小、阴影或其他方式进行一些调整

有关解决CSS中原始问题的另一种方法（除了使用SVG已有的优秀方法外），请参见。
以下代码段右侧是SVG环的结果，其中有两个大小/位置相同（但颜色不同）的克隆，禁用了抗锯齿（
shape rendering=“crispEdges”
）正如我刚才提到的：


正文{
背景：薰衣草；
保证金：0；
溢出：隐藏；
}
div{
宽度：200px；
高度：200px；
显示：内联块；
位置：相对位置；
}
svg{
宽度：200px；
高度：200px；
位置：绝对位置；
排名：0；
左：0；
}
跨度{
字体系列：arial，无衬线；
文本对齐：居中；
位置：绝对位置；
左：0；
右：0；
保证金：自动；
最高：45%；
}

形状渲染=“自动”
形状渲染=“边缘”
这里有两个可能的副本，一个：。。。2:…@LGSon在这些例子中，外边界明显大于内边界。。。在当前场景中，它应该没有任何边界（因为对象的大小完全相同）。我刚刚看到，这一个更好：你试图实现什么（无法理解）？解决方案是在需要之前不让一个的下方可见，因为它现在是编码的，它们无论如何都不应该显示（如果所有东西都是透明的）“正确”）。感谢您的回答，这是当前最小示例的有效解决方法，但不幸的是，我无法将其应用于（仅适用于chrome atm）正如您在这个屏幕截图上看到的：@freestock.tk我明白了。我在回答中添加了另一种方法。不仅是一个整洁的动画，而且是一个更短的代码。这真的很棒；您可以删除
，因为它没有覆盖任何内容，再加上add
repeatCount=“unfinite”“
在
标记中，让它像OP示例一样永远滚动@VAL对问题给出了最好的解释，而您提供了最好的解决方案。不幸的是，我不能将两者都标记为正确答案，所以+1，非常感谢你们两位！很好的解释，+1。svg方法也有抗锯齿问题，只是因为使用的颜色不同，所以不可见。我找到了以下答案来禁用图像上的抗锯齿：和以下答案来禁用文本上的抗锯齿，但没有找到任何东西来禁用径向边框上的抗锯齿；我发现这可以禁用svg形状上的抗锯齿；你对这个问题给出了最好的解释，@webtiki带来了最好的解决方案。不幸的是，我不能将两者都标记为正确答案，所以+1，非常感谢你们两位！