重叠的圆圈流血

Question

我有一个position:relative带有position:absolute红色克隆的绿色环:before和覆盖它们的position:absolute白色克隆:after(因为它们位于同一个地方并具有相同的大小).

问题是:它在测试的两个浏览器(Chrome和Firefox)上都会出现问题,我仍然可以看到白色蒙版下的绿色/红色环.让绿色环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

在径向进度条方案中,您可以使用此处描述的方法:循环百分比进度条.使用内联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>