progress标签设color不变色因其是替换元素，无文本节点；真正生效的是伪元素::-webkit-progress-value和::-moz-progress-bar，且必须先设appearance: none。
progress标签为什么设了color也不变色
因为color作用于文字，而原生<progress></progress>内部没有文本节点——它是个替换元素（replaced element），内容由浏览器私有渲染引擎生成，不能直接用color或background-color改进度条本体颜色。
真正起作用的是伪元素：::-webkit-progress-value（Chrome/Edge/Safari）和::-moz-progress-bar（Firefox）。这两个伪元素分别控制“已填充部分”的背景，才是调色的关键位置。
- 漏写
appearance: none会导致某些浏览器（尤其是 Safari）仍保留默认内边距、圆角或阴影，压住你写的渐变背景 - 只写
progress { background: linear-gradient(...) }是无效的——那只是轨道底色，不是进度条本身 - Firefox 的
::-moz-progress-bar不支持width或transform，只能靠background和border-radius控制外观
怎么给progress已填充部分加渐变色
渐变色必须作用在“已填充区域”上，也就是::-webkit-progress-value或::-moz-progress-bar，不能写在<progress></progress>标签自身。
例如实现从蓝到绿的横向渐变：
progress::-webkit-progress-value {
background: linear-gradient(90deg, #2196f3, #4caf50);
border-radius: 4px;
}
progress::-moz-progress-bar {
background: linear-gradient(90deg, #2196f3, #4caf50);
border-radius: 4px;
}
- 注意：Safari 对
linear-gradient在::-webkit-progress-value中支持良好，但旧版可能截断渐变范围；建议加background-size: 200% 100%并配合background-position做动画时更稳 - 渐变方向用
90deg（左→右）最自然；若用to right，部分旧版 WebKit 不识别 - 别试图用
transform: scaleX()控制长度——这会破坏原生进度计算逻辑，导致 Firefox 下完全失效
为什么Chrome里进度条颜色变了但Firefox还是灰色
因为 Firefox 只认::-moz-progress-bar，且它不支持 WebKit 那套::-webkit-progress-bar/::-webkit-progress-value拆分逻辑。在 Firefox 中，::-moz-progress-bar就等效于“已填充部分”，没有单独的轨道伪元素可调。
- 必须显式写出
progress::-moz-progress-bar规则，不能省略 - Firefox 不支持
::-moz-progress-bar上的transition，所以渐变色切换会突变，没法平滑过渡 - 如果发现 Firefox 完全没响应样式，检查是否漏写了
progress { appearance: none }——这是触发 Firefox 自定义渲染的前提 - IE 完全不支持
<progress></progress>，如需兼容，得 fallback 到<div role="progressbar"> + <code>aria-valuenowJS动态更新value后颜色没跟着变
颜色本身不会随
value变化——它是 CSS 固定规则，只要伪元素匹配就生效。所谓“没变”，通常是视觉错觉或 DOM 状态异常。- 确认 JS 是直接赋值
el.value = 75，而不是el.setAttribute('value', '75')（后者把 value 变成字符串，浏览器内部会忽略） - 检查
value是否超出max范围：比如max="100"却设value="120"，浏览器会截断为 100，但 UI 可能卡在旧状态 - 高频更新（如每 16ms 调一次）可能触发浏览器渲染优化，导致视觉跳变；建议用
requestAnimationFrame节制节奏，或改用 class 切换预设状态 - 如果用了 CSS
transition但没生效，注意：Firefox 不支持::-moz-progress-bar上的过渡，Chrome 下::-webkit-progress-value的width过渡也受限，稳妥做法是只对background做 transition
appearance: none必须写在progress选择器上，而不是伪元素里——少了这一句，所有后续样式都可能被浏览器默认样式压制。 - 确认 JS 是直接赋值
