我想通过使用css使进度条看起来像下面的图像.我能为它做些什么？ what i expected个
我已经试着这么做了.我得到的是这个. what i have done个
progress {
border: 1.5px solid silver;
border-radius: 0px;
width: 170px;
height: 18px;
}
progress::-webkit-progress-bar {
background-color: whitesmoke;
border-radius: 0px;
}
progress::-webkit-progress-value {
background-color: cornflowerblue;
border-radius: 0px;
}<section class="prog">
<p>Progress of today's class <progress value="2" max="5"></progress></p>
</section>你可以在background中加stripes.
使用线性渐变和%将#ececec色限制为1.5%的宽度，并添加白色作为填充 colored颜色 .
progress {
border: 1.5px solid silver;
border-radius: 0px;
width: 170px;
height: 18px;
}
progress::-webkit-progress-bar {
background: linear-gradient(
to right,
white 10%,
#ececec 11% 11.5%,
white 11.5% 20%,
#ececec 20% 21.5%,
white 21.5% 30%,
#ececec 31% 31.5%,
white 31.5% 40%,
#ececec 41% 41.5%,
white 41.5% 50%,
#ececec 51% 51.5%,
white 51.5% 60%,
#ececec 60% 51.5%,
white 61.5% 70%,
#ececec 70% 71.5%,
white 71.5% 80%,
#ececec 80% 81.5%,
white 81.5% 90%,
#ececec 90% 91.5%,
white 10%
);
border-radius: 0px;
}
progress::-webkit-progress-value {
background-color: cornflowerblue;
border-radius: 0px;
}<section class="prog">
<p>Progress of today's class
<progress value="2" max="5"></progress>
</p>
</section>progress {
border: 1.5px solid silver;
border-radius: 0px;
width: 170px;
height: 18px;
}
progress::-webkit-progress-bar {
background: repeating-linear-gradient(90Deg, white, white 9%, #ececec 10%);
border-radius: 0px;
}
progress::-webkit-progress-value {
background-color: cornflowerblue;
border-radius: 0px;
}<section class="prog">
<p>Progress of today's class
<progress value="2" max="5"></progress>
</p>
</section>