Chrome用::-webkit-progress-value、Firefox用::-moz-progress-bar分别控制已填充部分颜色，二者语义等效但需分别设置background-color，漏写Firefox规则会导致其仍显示默认色。
Chrome 用 ::-webkit-progress-value，Firefox 用 ::-moz-progress-bar
这两个伪元素分别控制“已填充部分”的颜色，但语义不同：Chrome 的 ::-webkit-progress-value 是填充条本身，Firefox 的 ::-moz-progress-bar 也等效于填充条（不是轨道），所以两者都得设 background-color，不能只写一个。
常见错误是漏掉 Firefox 规则，结果 Chrome 变色了、Firefox 还是默认橙色。另外，旧版 Firefox（::-moz-progress-bar，但当前主流版本（2026 年）已稳定支持，无需降级到 color 属性。
-
progress::-webkit-progress-value必须配合progress { -webkit-appearance: none }才生效 -
progress::-moz-progress-bar必须配合progress { appearance: none }，否则样式被忽略 - 不要给
progress自身设background-color或color——它对填充条无效
必须重置 appearance: none，否则伪元素不触发
这是跨浏览器统一样式最关键的前置条件。没加这句，Chrome/Safari 可能部分生效，Firefox 则大概率完全不响应 ::-moz-progress-bar。
兼容写法要同时写两套：
立即学习“前端免费学习笔记（深入）”；
progress {
-webkit-appearance: none;
appearance: none;
height: 8px;
border-radius: 4px;
background-color: #e0e0e0; /* 轨道底色 */
}
progress::-webkit-progress-bar {
background-color: transparent;
}
progress::-webkit-progress-value {
background-color: #4a90e2;
border-radius: 4px;
}
progress::-moz-progress-bar {
background-color: #4a90e2;
}注意：background-color: #e0e0e0 是作用在 progress 元素自身上的——它渲染的是轨道底色，不是填充条；而 ::-webkit-progress-bar 设为 transparent 是为了不让它盖住你写的渐变或纯色。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
渐变色在 Firefox 里不生效，只能降级为纯色
Firefox 的 ::-moz-progress-bar 不支持 linear-gradient()，设了也没效果，会回退到第一个颜色或透明。Chrome/Safari 则可以通过 ::-webkit-progress-value 安全使用渐变。
如果需要渐变，只能这样处理：
- Chrome/Safari：用
progress::-webkit-progress-value { background: linear-gradient(90deg, #2196f3, #4caf50); } - Firefox：降级为
progress::-moz-progress-bar { background-color: #4caf50; }（取渐变终点色或中间色） - 别试图用
background-image或mask强行模拟——Firefox 不识别这些在该伪元素上的应用
圆角和高度在 Firefox 中表现不稳定
Firefox 的 ::-moz-progress-bar 对 border-radius 支持有限，有时会被截断或失效。更可靠的做法是靠父容器控制视觉圆角：
<div style="border-radius: 4px; overflow: hidden;"> <progress value="60" max="100"></progress> </div>
同时统一设 progress { height: 8px }，避免各浏览器默认高度差异（Chrome 默认约 10px，Firefox 约 6px）。不要用 transform: scaleY() 拉伸——会导致填充区域锯齿或错位，尤其在高 DPI 屏幕上明显。
真正容易被忽略的点是：Firefox 不支持 ::-moz-progress-bar 上的 transition，所以颜色切换一定是突变；如果需要平滑过渡，得用 JS 控制多个 class 切换 + opacity 动画，而不是依赖伪元素本身的 transition。
