进度条颜色不生效需检查 background 是否被覆盖，WebKit 内核须用 ::-webkit-progress-bar 和 ::-webkit-progress-value 伪元素控制，Firefox 应改用自定义 div + role="progressbar"。
进度条颜色不生效？检查 background 是否被覆盖
CSS 进度条多色实现，最常踩的坑是用 background 写了渐变，但浏览器默认样式或父级 overflow: hidden 切掉了颜色边界。尤其在 <progress></progress> 元素上，WebKit 内核（Chrome/Safari）必须通过 ::-webkit-progress-bar 和 ::-webkit-progress-value 两层伪元素控制，直接写 background 在 <progress></progress> 标签本身无效。
- 用
appearance: none清除默认样式，再手动定义伪元素 - Firefox 需单独用
::progress-bar（已废弃）或改用自定义<div> + <code>role="progressbar" - 渐变方向要匹配进度方向：水平进度条优先用
to right，避免颜色错位 - 推荐写法：
progress-bar--theme-success、progress-bar--theme-warning，而非progress-bar--green或progress-bar--high - 每个
--theme-X对应一套完整的渐变色值、文字色、边框色，保证可维护性 - 别在修饰符里塞具体颜色值，比如
--theme-#28a745—— 这破坏语义，也难复用 - 例如 0–30% 蓝、30–70% 黄、70–100% 红，需用三层
linear-gradient叠加，每层宽度按百分比计算 - 更稳妥的做法是放弃原生
<progress></progress>，改用带data-value的<div class="progress-bar">，用 JS 动态设 <code>style="--progress: 65;"，再用 CSS 变量驱动背景裁切 - 注意 Safari 对多层
background的解析兼容性，建议加background-clip: padding-box防止溢出 - 必须加
role="progressbar"、aria-valuenow、aria-valuemin、aria-valuemax - SSR 场景下，把初始
value写进 HTML 属性，比如aria-valuenow="42"，JS 启动后再接管更新 - 别依赖 CSS 动画模拟进度变化——动画无法同步
aria-valuenow，会误导辅助技术
BEM 修饰符怎么命名才不混乱？用 --theme- 前缀统一语义
BEM 的修饰符不是随便加个 --red 就完事。进度条颜色本质是主题变体，不是视觉状态（如 --disabled），所以应归入主题体系，避免和交互类修饰符混用。
渐变色怎么写才适配不同进度值？别只靠 linear-gradient
纯 CSS 线性渐变无法根据当前 value 动态调整色停位置，所以“多色进度条”实际是分段渲染：用多个 background 图层叠加，每段对应一个区间，靠 background-size 和 background-position 控制显示比例。
要不要支持 SSR 或无障碍？role="progressbar" 是底线
用 <div> 实现进度条时，很多人忘了语义。光有视觉效果，屏幕阅读器读不出当前进度，服务端渲染时 JS 还没执行，<code>value 为空白，用户看到的就是个空条。
立即学习“前端免费学习笔记（深入）”；
真正麻烦的从来不是怎么让颜色变多，而是怎么让每种颜色都准确对应语义、可访问、可预测。BEM 修饰符只是命名习惯，背后得有一套主题映射表和可测试的色值规范，否则换肤时改十个文件还漏两个。
