我有一个位置：相对绿色环有一个位置：绝对红色克隆：之前和一个位置：绝对白色克隆：它覆盖两者之后(因为它们在同一个地方并且具有相同的大小).
问题是：它在测试的两个浏览器(Chrome和Firefox)上都会出现问题,我仍然可以看到白色蒙版下的绿色/红色环.让溢出的绿色环：隐藏部分修复了去除外部出血的问题;但内部出血边界仍然存在.
为什么会发生这种情况,我怎么能完全隐藏下面的圆圈呢？
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>
解决方法
在径向进度条方案中,您可以使用此处描述的方法：
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>
