progress标签默认样式无法通过直接设置background或color修改，因其为替换元素，需用::-webkit-progress-bar和::-moz-progress-bar等伪元素分别控制轨道与填充色，WebKit支持双伪元素定制，Firefox仅支持::-moz-progress-bar填充色且需父容器模拟底色。
progress标签的默认样式为什么改不了
直接给 <progress> 写 background 或 color 没用，因为浏览器对它的渲染依赖内部伪元素（比如 ::-webkit-progress-bar 和 ::-moz-progress-bar），不是普通块级元素。不覆盖这些伪元素，CSS 就像打在棉花上。
WebKit内核（Chrome/Safari/Edge）怎么改填充色和背景色
关键在两个伪元素：::-webkit-progress-bar 控制外框（即背景），::-webkit-progress-value 控制进度条本身（即填充）。注意：后者必须配合 background-color，且不能用 width 或 height 手动调大小——它的尺寸由 value 和 max 决定。
-
progress::-webkit-progress-bar设background-color改底色 -
progress::-webkit-progress-value设background-color改填充色，同时建议加border-radius保持圆角一致 - 如果想隐藏默认边框，可对
::-webkit-progress-bar加border: none
progress::-webkit-progress-bar {
background-color: #e0e0e0;
}
progress::-webkit-progress-value {
background-color: #4caf50;
border-radius: 4px;
}
Firefox（Gecko）怎么兼容处理
Firefox 用 ::-moz-progress-bar 控制填充色，但不暴露背景层的伪元素——也就是说，你只能改填充色，底色得靠包裹容器或额外伪元素模拟。最稳妥的方式是给 <progress> 加个父容器，设背景色，再让 progress 本身透明化。
-
progress::-moz-progress-bar只能设填充色，不支持单独控制背景 - 为统一视觉，常把
progress设为background: transparent，靠父容器撑出底色 - Firefox 不支持
border-radius在::-moz-progress-bar上生效，圆角需靠父容器裁剪
.progress-wrapper {
background-color: #e0e0e0;
border-radius: 4px;
overflow: hidden;
padding: 2px;
}
.progress-wrapper progress {
background: transparent;
border: none;
width: 100%;
}
progress::-moz-progress-bar {
background-color: #4caf50;
}
颜色响应 value 变化是否可行
纯 CSS 无法根据 value 动态切换颜色（比如 0–50% 蓝、50–100% 红），::before/::after 也不能在 <progress> 内部生效。真要实现渐变色或分段色，必须用 JS 监听 value 并切换 class，或者干脆用 <div> + aria-valuenow 自定义实现。
立即学习“前端免费学习笔记（深入）”；
- 不要试图用
progress[value="75"]这类属性选择器——value是 DOM 属性，不是 HTML 属性，CSS 选不到 - 动态颜色属于交互逻辑，CSS 的职责是样式表达，不是状态响应
- 若只需求简单阈值色（如 warning/red 当 value > 80），可用 JS 更新 class：
el.classList.toggle('high', el.value > 80)
跨浏览器一致改色，核心就两条：WebKit 用两个伪元素分别控制，Firefox 借父容器兜底。别漏掉 overflow: hidden 和 border-radius 的配合，不然圆角会穿帮。
