用div模拟进度条并用linear-gradient实现彩色效果，需通过width或transform:scalex()控制填充长度，避免直接样式原生progress标签，兼容ie9需加纯色兜底和-ms-前缀。
用 linear-gradient 直接控制进度条颜色
彩色进度条本质不是“加颜色”，而是让 background 随进度动态变化。原生 <progress></progress> 标签本身不支持渐变背景，必须用 <div> 模拟，靠 CSS 控制视觉进度和颜色过渡。
<p>关键点：用伪元素或子容器做“已填充部分”，给它设 <code>background: linear-gradient(...)，再通过 width 或 transform: scaleX() 控制长度。
常见错误是直接给 <progress></progress> 的 ::-webkit-progress-bar 设渐变——这只能改背景色，无法实现“从左到右彩色过渡”效果，因为浏览器对原生控件的样式限制极严。
- 推荐用
<div class="progress"><div class="progress-fill"></div></div>结构 -
.progress-fill设background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #44b5b1); - 用 JS 改
.progress-fill的width（比如style.width = "65%"）来反映进度
IE 不支持 linear-gradient？那就 fallback 到单色
IE10+ 支持带 -ms- 前缀的 linear-gradient，但 IE9 及更早版本完全不支持。如果项目还要兼容 IE9，不能只写渐变，得加一层纯色兜底。
顺序很重要：CSS 会按书写顺序覆盖，把不带前缀的写在最后，确保现代浏览器用最新语法；旧浏览器读到不认识的属性就跳过，退回到上一行的纯色定义。
background: #e0e0e0; background: -ms-linear-gradient(left, #ff6b6b, #4ecdc4); background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
注意：IE 的 -ms-linear-gradient 方向参数是 left/top，不是角度；而现代写法用 90deg 表示从左到右，别混用。
动画卡顿？别用 width 做进度变化
用 width 动态改变进度条长度，每次更新都会触发 layout（重排），尤其在低性能设备上容易掉帧。更优解是用 transform: scaleX() + will-change: transform，只触发合成，不牵扯布局计算。
- 给
.progress-fill设固定width: 100%，再用transform: scaleX(0.65)控制显示比例 - 加上
transition: transform 0.3s ease实现平滑过渡 - 若需高性能动画（如实时上传进度），额外加
will-change: transform提前提醒浏览器优化
顺便提醒：别在 transform 里用百分比值（如 scaleX(65%)），语法错误，必须是小数（scaleX(0.65)）。
移动端 touch 拖动进度？得手动处理事件链
原生 <progress></progress> 是只读的，没法拖。想让用户滑动调整进度，必须自己监听 touchstart/touchmove，并换算坐标到进度值。
核心难点不在颜色，而在坐标映射：要拿到进度条容器的 getBoundingClientRect()，再用 touch.clientX 减去容器左偏移，除以容器宽度，得出 0–1 范围的进度值。
- 记得同时监听
mousedown和touchstart，覆盖鼠标和触屏 -
touchmove必须调event.preventDefault()，否则 iOS 会触发页面滚动 - 计算时用
clientX而非pageX，避免滚动位置干扰
颜色本身没新问题，但交互一复杂，渐变起点/终点的位置感就容易错乱——尤其是当进度条被缩放或嵌在 flex 容器里时，getBoundingClientRect() 返回的宽高可能和 CSS 渲染不一致，这点很容易被忽略。
