css – 重叠圆圈流血

我有一个位置：相对绿色环有一个位置：绝对红色克隆：之前和一个位置：绝对白色克隆：它覆盖两者之后(因为它们在同一个地方并且具有相同的大小).

问题是：它在测试的两个浏览器(Chrome和Firefox)上都会出现问题,我仍然可以看到白色蒙版下的绿色/红色环.让溢出的绿色环：隐藏部分修复了去除外部出血的问题;但内部出血边界仍然存在.

为什么会发生这种情况,我怎么能完全隐藏下面的圆圈呢？

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目前只在更新的谷歌浏览器上工作;

解决方法

在径向进度条方案中,您可以使用此处描述的方法： 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>

原文地址：https://www.jb51.cc/css/242324.html