progress标签默认样式无法通过color或background-color修改，因其是替换元素，需用accent-color（现代浏览器）或伪元素（如::-webkit-progress-bar、::-moz-progress-bar）定制。
progress 标签的默认样式不能靠 color 或 background-color 直接改——它是个替换元素，浏览器用原生控件渲染，CSS 作用域被隔离。想改颜色，必须走伪元素或新属性两条路。
为什么直接写 background-color 没反应
给 progress 元素本身加 background-color、color、border 都无效，不是你漏写了选择器，是规范决定它不响应这些通用属性。它的轨道和填充条由 UA 样式控制，必须用特定伪元素或 accent-color 干预。
-
progress是 replaced element，内部盒模型不可见，::after/::before也挂不上 - Chrome/Firefox/Safari 默认渲染差异大：Chrome 蓝条带阴影，Firefox 橙条无边框，Safari 更细且圆角明显
- 不加
appearance: none（或旧版-webkit-appearance: none）时，部分浏览器会忽略后续伪元素样式
Chrome/Edge/Safari 用 ::-webkit-progress-* 伪元素
Blink/WebKit 内核浏览器支持 ::-webkit-progress-bar（轨道）和 ::-webkit-progress-value（填充条），这是最常用、最可控的方式。
- 必须先写
progress { -webkit-appearance: none; height: 8px; }，否则伪元素不生效 -
::-webkit-progress-bar只能设background-color、border-radius、box-shadow，不能设width或margin -
::-webkit-progress-value的background-color会覆盖默认色，但transform、animation、box-shadow容易引发闪烁，建议只用纯色 - 想让进度条变细？靠
height控制整体高度，再用border-radius+ 父容器overflow: hidden模拟圆角收边
Firefox 用 ::progress-bar 和 ::progress-value
Firefox 69+ 支持标准伪元素，但兼容性弱于 WebKit，且对圆角等支持有限，需单独处理。
立即学习“前端免费学习笔记（深入）”；
- 必须写
progress { appearance: none; -moz-appearance: none; }，否则自定义不触发 -
::progress-bar控制轨道背景，::progress-value控制填充色；两者都只接受background-color等基础属性 -
border-radius在::progress-value上基本无效，圆角得靠外层容器border-radius+overflow: hidden模拟 - 若样式不生效，优先检查是否漏了
appearance: none，而不是怀疑选择器写错
现代方案：accent-color + 渐进增强
accent-color 是目前最简方案，Chrome 93+、Firefox 97+、Safari 15.4+ 均支持，但它只改“进度条本体”颜色，轨道底色仍需伪元素或 background 单独设。
-
progress { accent-color: #4a90e2; }一行就能统一主色，比写三套伪元素省事得多 - 但它不替代轨道样式：轨道默认是浅灰，仍需
::-webkit-progress-bar或::progress-bar显式设background-color - 老版本浏览器（如 Chrome accent-color 覆盖」写法
- 别在
::-webkit-progress-value里加transition: width——value 变化自带动画，手动加反而卡顿
真正难的不是写几行 CSS，而是意识到：没有一套规则能同时搞定所有浏览器的渲染逻辑。伪元素要分内核写，accent-color 要查兼容表，圆角要靠 overflow: hidden 模拟，而显示百分比文字必须另起 DOM 节点——这些都不是 bug，是 progress 标签的设计现实。
