css - 重叠的圆圈出血

Question

我有一个 position:relative 绿色环，带有一个 position:absolute 红色克隆 :before 和一个 position:absolute 白色克隆 :after 它覆盖了两者(因为它们在同一个地方并且具有相同的大小)。

问题是:它在测试的两个浏览器(Chrome 和 Firefox)上都呈现错误，我仍然可以看到白色 mask 下的绿色/红色环。让带有 overflow:hidden 的绿色环部分修复了去除外层出血的问题；但内部出血边界仍然存在。

为什么会这样，我怎样才能完全隐藏下面的圆圈？

Codepen

body {
  background: lavender;
}

#ring {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 50px solid green;
}

#ring:before {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 100px;
  height: 100px;
  border: 50px solid red;
  border-radius: 50%;
}

#ring:after {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 50px solid white;
}

<div id=ring></div>

更新:这是完整(非最小)场景的链接:Codepen目前仅适用于更新后的谷歌浏览器；

Answer 1

在您的径向进度条方案中，您可以使用此处描述的方法:Circular percent progress bar .使用 inline svg并为 stroke-dasharray 设置动画进度条的属性。
适应您的用例，它看起来像这样:

body{background:lavender;}
svg{width:200px;height:200px;}

<svg viewbox="-2.5 -2.5 105 105">
  <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="25" stroke="#fff"/>
  <path fill="none" stroke-width="25" stroke="tomato"  stroke-dasharray="251.2,0" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80">
    <animate attributeName="stroke-dasharray" from="0,251.2" to="251.2,0" dur="5s"/>           
  </path>
</svg>

请注意，在此示例中，动画是使用 SMIL 制作的.但是您也可以按照径向进度条答案中的描述使用 JS 来完成。

---

上一个回答:
如果您的目标是消除出血，一种解决方案是通过使伪元素边框更宽来隐藏它。
根据您的实际用例，此解决方案可能是合适的。

这是一个例子:

body{background:lavender}
#ring {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 50px solid green;
}
#ring:before {
  content: '';
  position: absolute;
  top: -51px;
  left: -51px;
  width: 98px;
  height: 98px;
  border: 52px solid red;
  border-radius: 50%;
}
#ring:after {
  content: '';
  position: absolute;
  top: -52px;
  left: -52px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 54px solid white;
}

<div id="ring"></div>