应使用多个独立元素并排显示，或改用+aria属性模拟；前者语义清晰、轻量可靠，后者支持分段标签与状态标识，且必须设置role="progressbar"以保障可访问性。

怎么用 <progress></progress> 实现多段进度条

<progress></progress> 本身不支持多段，它只表示一个连续的、单一范围的完成度。硬塞多个 value 或试图用 CSS 伪元素“画”出分段效果，最终会失去语义、无法被屏幕阅读器识别，且交互逻辑混乱。真要表达“多个阶段各自完成”，得换思路：用多个独立的 <progress></progress> 元素，或改用 <div> + ARIA 属性模拟。 <h3>用多个 <code><progress></progress> 并排显示的实操要点

这是最轻量、语义最清晰的做法，适合阶段明确、互不重叠的流程（比如安装步骤：下载 → 解压 → 配置 → 启动）。

• 每个 <progress></progress> 单独控制 value 和 max，例如 <progress value="85" max="100"></progress>
• 用 Flex 布局并排，加固定高度和间距：

  progress { height: 8px; margin-right: 12px; }

• 关键：为每个进度条加 aria-label，如 aria-label="下载进度：85%"，否则辅助技术无法区分它们
• 不要用 width 控制长度——<progress></progress> 的宽度应由容器决定，靠 CSS flex 或 inline-block 排列更可靠

用 <div> 模拟带分段标识的进度条（含文字标签） <p>当需要在进度条上直接标出各阶段名称（如“准备｜验证｜部署｜完成”），或某阶段有“未开始 / 进行中 / 已完成”三种状态时，<code><progress></progress> 就不够用了。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 结构示例：

  <div class="segmented-progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <div class="segment active" style="flex: 2;" aria-label="验证阶段：已完成">验证</div>
    <div class="segment current" style="flex: 1;" aria-label="部署阶段：进行中">部署</div>
    <div class="segment" style="flex: 1;" aria-label="完成阶段：未开始">完成</div>
  </div>

• flex 比例代表各阶段相对耗时权重，不是绝对进度值；实际完成度靠 JS 动态更新 aria-valuenow 和 class
• 必须设 role="progressbar"，否则不会被读屏软件识别为进度组件
• 避免用纯背景色块+文字重叠——文字可能被裁剪，且无法聚焦、无法键盘操作

Chrome/Firefox/Safari 对多段进度条的兼容性注意点

原生 <progress></progress> 在 Safari 中默认样式极简，且不支持 ::after 伪元素覆盖内部轨道；Firefox 对 accent-color 支持较晚（v99+）。这些都会影响你“画”分段视觉效果的尝试。

• 别依赖 progress::-webkit-progress-bar 做跨浏览器分段——WebKit-only，Safari 不认
• 如果要用 CSS 自定义轨道颜色，优先用标准属性：

  progress { accent-color: #4a90e2; }

  （注意：IE 完全不支持，Edge 101+ 才稳定）
• 想让所有浏览器显示一致的分段视觉？老实用 <div> + SVG 或 Canvas，虽然重一点，但可控性强 <li>移动端 Safari 对 <code>height 小于 6px 的 <progress></progress> 渲染异常，建议最小设为 height: 6px

真正麻烦的不是怎么画出几段颜色，而是让每一段都可感知、可访问、可维护。一旦加入动态状态切换或后端进度回传，用原生 <progress></progress> 硬凑多段，很快就会卡在 ARIA 属性同步和焦点管理上。