如何使用CSS将Progress Bar修改为预期样式？

你想要的是分段式进度条（每一个进度单位对应一段独立填充块），当前代码实现的是连续填充效果，以下是修改后的实现方案：

修改后的CSS代码 #

progress {
  border: 1.5px solid silver;
  border-radius: 0;
  width: 170px;
  height: 18px;
  /* 重置浏览器默认外观 */
  -webkit-appearance: none;
  appearance: none;
}

progress::-webkit-progress-bar {
  background-color: whitesmoke;
  border-radius: 0;
}

progress::-webkit-progress-value {
  /* 基于max=5设置分段渐变，每段占总宽度20% */
  background: linear-gradient(
    to right,
    cornflowerblue 0%, cornflowerblue 20%,
    transparent 20%, transparent 100%
  );
  /* 重复渐变匹配分段数量 */
  background-size: 20% 100%;
}

/* 适配Firefox浏览器 */
progress::-moz-progress-bar {
  background: linear-gradient(
    to right,
    cornflowerblue 0%, cornflowerblue 20%,
    transparent 20%, transparent 100%
  );
  background-size: 20% 100%;
}

HTML代码（无需修改） #

<section class="prog">
  <p>今日课程进度 <progress value="2" max="5"></progress></p>
</section>

实现说明 #

• 利用线性渐变linear-gradient创建分段填充效果，因为进度条的max值为5，所以每段占总宽度的20%（100%/5）
• 通过background-size设置渐变重复规则，确保分段数量与进度最大值匹配
• 重置appearance属性避免浏览器默认样式干扰，同时补充Firefox适配样式保证多浏览器兼容性

内容的提问来源于stack exchange，提问作者DaiFuGu