纯css进度条需js驱动值更新，css仅负责渲染；可用linear-gradient实现纹理填充，clip-path替代width提升动画性能，但需兼容safari和ie；应保留原生progress语义并同步aria属性。
纯 CSS 进度条能跑起来，但得靠 width 或 transform: scaleX() 驱动，浏览器不自动更新——你得用 JS 控制值，CSS 只管“怎么画”。
用 linear-gradient 实现带纹理的填充效果
默认的 background-color 填充太单调，加渐变能模拟“流动感”或“金属质感”。但注意：渐变方向必须和进度方向一致，否则拉伸时会错位。
- 横向进度条用
to right，纵向用to bottom - 渐变色停靠点要设成百分比（如
0%, 50%, 100%），避免固定像素导致缩放失真 - 别直接在
::after上用渐变再叠一层——多一层渲染层可能触发重排，优先用单层background
progress-bar::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(90deg, #4a90e2, #6366f1, #8b5cf6);
clip-path: inset(0 0 0 calc(100% - var(--pct, 0%)));
}
用 clip-path 替代 width 避免重排
width 改变会触发 layout，动画卡顿明显；clip-path 是合成层操作，更顺。但 Safari 对 inset() 的百分比支持从 v15.4 才稳定，老版本需降级。
- 写法统一用
inset(0 0 0 calc(100% - X%))，X 是当前完成度 - 不要用
clip-path: polygon()动态算四个点——计算开销大，且容易因小数精度出锯齿 - IE 完全不支持
clip-path，需要 fallback：对.progress-fill元素用width+transition
让 <progress></progress> 元素真正可访问
原生 <progress></progress> 标签自带语义和键盘支持（Tab 可聚焦，aria-valuenow 自动同步），但默认样式丑且难改。强行用 div 模拟会丢掉这些能力。
- 保留
<progress value="30" max="100"></progress>结构，只覆盖appearance: none - 用
progress::-webkit-progress-bar和progress::-webkit-progress-value控制 WebKit 内核 - Firefox 用
progress::-moz-progress-bar，注意它不支持渐变背景，只能用纯色 - 务必保留
role="progressbar"和aria-label，屏幕阅读器依赖这个
最易被忽略的是动画帧率和语义同步：JS 更新 value 后，如果没触发 reflow 或没加 will-change: transform，Safari 下 clip-path 动画可能掉帧；而 aria 属性若用 JS 手动更新却漏了 aria-valuetext，视障用户就只知道“30”，不知道单位或含义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
