如何仅使用CSS将蓝色圆圈用作进度条的值? 进度条本身只有2像素高度,代表进度条值的圆圈要大得多。
.circle {
width: 20px;
height: 20px;
border: 2px solid blue;
border-radius: 50%;
}
progress {
background-color: #9da29b;
border: 0;
height: 2px;
width: 100%;
margin-top: 5em;
}
progress::-webkit-progress-bar {
background-color: #9da29b;
}
progress::-webkit-progress-value {
background-color: #f01010;
}
progress::-moz-progress-bar {
background-color: #9da29b;
}
#this-is-not-that-i-want {
background-color: #9da29b;
border: 0;
height: 30px;
width: 100%;
margin-top: 5em;
}
#this-is-not-that-i-want::-webkit-progress-value {
background-color: #f01010;
background-image: radial-gradient(circle at calc(100% - 30px) center, black 15px, lightgreen 15px);
}
#this-is-not-that-i-want::progress-value {
background-image: radial-gradient(circle at calc(100% - 30px) center, black 15px, lightgreen 15px);
}
}

<div class="circle"></div>
<progress id="it-is-smaller-than-the-circle" value="60" max="100"></progress>
<progress id="this-is-not-that-i-want" value="60" max="100"></progress>
&#13;
答案 0 :(得分:0)
如果我理解正确,您可以使用:after在进度条中创建一个伪元素,然后将其置于进度级别。
#it-is-smaller-than-the-circle::-webkit-progress-value {position: relative;}
#it-is-smaller-than-the-circle::-webkit-progress-value:after {
content:'';
display:block;
width:20px;
height:20px;
border:2px solid blue;
border-radius: 50%;
position:absolute;
left:100%;
margin:-10px 0 0 -10px;
}