progress元素color不生效因其是替换元素，视觉由浏览器UA样式控制；必须用accent-color（Chrome93+/Firefox97+/Safari15.4+）或伪元素（如::-webkit-progress-value、::progress-value）定制样式。
直接改 color 或 background-color 无效，必须用伪元素或 accent-color —— 这是绝大多数人卡住的第一步。
progress 元素的 color 属性为什么不起作用
因为 <progress> 是替换元素（replaced element），它的视觉结构由浏览器 UA 样式控制，不是普通盒模型。你写的 color、background-color 都不会透传到内部轨道或填充条上。
- 写
progress { color: red; }→ 完全没反应 - 写
progress { background: linear-gradient(...); }→ 只影响外层容器背景，不改变进度条本体 - 真正生效的只有：
accent-color（现代浏览器）或浏览器前缀伪元素（全兼容必需）
Chrome / Safari 怎么用伪元素改颜色
WebKit/Blink 内核必须用 ::-webkit-progress-bar 和 ::-webkit-progress-value 分别控制轨道和填充条。
- 必须加
-webkit-appearance: none，否则伪元素不触发 -
::-webkit-progress-bar设置轨道底色（未填充部分） -
::-webkit-progress-value必须设background-color（或background-image），width/height 无效，它由 value/max 自动撑开 - 圆角要同步写在两个伪元素上，否则只有一边圆
progress {
height: 8px;
-webkit-appearance: none;
}
progress::-webkit-progress-bar {
background-color: #f0f0f0;
border-radius: 4px;
}
progress::-webkit-progress-value {
background-color: #4a90e2;
border-radius: 4px;
}
Firefox 怎么避免样式回退到默认橙色
Firefox 69+ 支持标准伪元素 ::progress-bar 和 ::progress-value，但漏掉 appearance: none 就会失效。
立即学习“前端免费学习笔记（深入）”；
- 旧版写法需同时加
appearance: none和-moz-appearance: none -
::progress-value不支持border-radius，得靠父容器overflow: hidden+ 圆角模拟 - 渐变色可用
background: linear-gradient(...)，但不要加box-shadow，否则动画卡顿
progress {
appearance: none;
-moz-appearance: none;
height: 8px;
overflow: hidden;
border-radius: 4px;
}
progress::progress-bar {
background-color: #f0f0f0;
}
progress::progress-value {
background-color: #2196F3;
}
想用渐变色或动态变色，绕不开的坑
纯色简单，渐变就得拼兼容写法；动态变色（比如 0–100% 从绿变红）不能靠 CSS transition 驱动 value，浏览器根本不重绘伪元素。
- 渐变只能写在
::-webkit-progress-value或::progress-value的background上，accent-color不支持渐变 - 动态变色建议用 JS 控制
el.value逐步更新（配合requestAnimationFrame），再用 class 切换预设色值 - 别在伪元素里用
transform、filter或复杂阴影，Chrome 下容易闪动或跳帧
最稳的渐变写法示例（仅 WebKit）：
progress::-webkit-progress-value {
background: linear-gradient(90deg, #4CAF50, #FFC107, #F44336);
}
注意：Firefox 不识别这个语法，必须单独补 ::progress-value 的纯色 fallback，否则在 Firefox 里就变成默认橙色——这点最容易被忽略。
