<p>必须加 appearance: none（含 -webkit-、-moz- 前缀）才能自定义 progress 样式，否则 background-color、height、border-radius 等无效；伪元素需分浏览器写全：WebKit 用 ::-webkit-progress-bar/value，Firefox 用 ::-moz-progress-bar；高度由 progress 的 height 控制，圆角需结合 overflow: hidden 裁切；动画应避免 transition，改用 JS + requestAnimationFrame；旧版浏览器需降级为 div + aria-valuenow。</p>
progress必须加appearance: none才能开始自定义
不加这句，background-color、height、border-radius基本都无效——因为浏览器把它当系统控件渲染，CSS 盒模型被绕过。Chrome/Safari/Edge 需要 -webkit-appearance: none，Firefox 需要 -moz-appearance: none，现代标准是 appearance: none。三者建议写全，顺序按规范推荐：先写带前缀的，最后写无前缀的标准属性。
WebKit 和 Firefox 的伪元素必须分开写全
Chrome/Edge/Safari 只认 ::-webkit-progress-bar（轨道）和 ::-webkit-progress-value（填充），Firefox 只响应 ::-moz-progress-bar（它没有独立的轨道伪元素）。漏掉任一，对应浏览器就回退到难看的原生样式：
-
::-webkit-progress-bar可设background-color、border-radius，但不能设width或margin -
::-webkit-progress-value的background-color覆盖填充色，border-radius必须和轨道一致，否则圆角断裂 -
::-moz-progress-bar既控制填充色，也承担“轨道视觉底色”职责，所以父级progress的background-color是给 Firefox 轨道打底用的
height 和 border-radius 容易踩坑
progress { height: 8px; border-radius: 4px; } 看似合理，其实只影响外层容器；内部填充条仍可能直角、居中留白或高度不匹配。真正生效的位置是：
- 所有浏览器：高度靠
progress自身的height控制，但必须配合appearance: none - WebKit：
::-webkit-progress-value和::-webkit-progress-bar都得显式写border-radius - Firefox：
::-moz-progress-bar不支持border-radius独立生效，得靠progress的overflow: hidden+border-radius裁切溢出部分 - iOS Safari 有约 8px 最小高度限制，设
height: 6px可能被忽略
动画别用 transition，改用 JS + requestAnimationFrame
transition: width 0.3s ease 在 ::-webkit-progress-value 上容易闪烁或卡顿，尤其在低性能设备上。浏览器对这个伪元素的动画支持不稳定，且 Firefox 完全不支持该属性。更可靠的做法是：
立即学习“前端免费学习笔记（深入）”；
- 用 JavaScript 动态更新
progress.value - 配合
requestAnimationFrame做插值计算，避免 layout thrashing - 如果非要用 CSS 动画，可对
progress外层容器加@keyframes模拟流动效果（如背景条纹滚动），而非直接驱动进度值
最常被忽略的是：appearance: none 的兼容性检查和 fallback 方案。Safari 15.4+、Chrome 93+、Firefox 89+ 支持良好，但旧版 iOS Safari 或某些企业内嵌 WebView 仍可能忽略它——这时候得准备一个基于 div + aria-valuenow 的降级实现，而不是指望 CSS 能兜住一切。
