progress元素无法原生支持多段渐变，必须用div模拟；需通过双层渐变+opacity过渡实现平滑动画，色标须成对显式声明位置，文字渐变推荐SVG替代。
progress 元素本身不支持多段渐变，得用伪元素覆盖
原生 <progress></progress> 标签的样式控制能力极弱，::-webkit-progress-bar 和 ::-webkit-progress-value 只允许单色填充，无法直接写多个色标。想实现“0–30%蓝、30–70%黄、70–100%红”这种分段效果，必须放弃直接样式化 progress，改用 <div> 模拟，并通过伪元素或子元素分层控制。<p>常见错误是强行给 <code>progress 加 background: linear-gradient()，结果只渲染第一段颜色，或者整个条被浏览器强制重置为单色——因为规范没定义它该怎么处理多色渐变。
- 推荐结构：一个容器
.progress-track（灰色底），内部一个.progress-fill（动态宽度 + 渐变背景） -
.progress-fill必须设background-image: linear-gradient()，不能用background-color - 宽度控制用
width: calc(var(--pct) * 1%)或 JS 动态设置style.width
linear-gradient 里写 3 个以上色标才能真正分段
很多人以为 linear-gradient(to right, #3498db 30%, #f1c40f 70%, #e74c3c) 就能分三段，其实不是：浏览器会在 30% 处从蓝切到黄，在 70% 处从黄切到红，但中间没有过渡，视觉上是硬边——这不是“渐变”，是“色块拼接”。
要真分段+带过渡，每个分段交界处必须有重叠色标。例如蓝→黄段，不能只写 #3498db 30%, #f1c40f 30%（这会出尖刺），而要留出缓冲区间：
立即学习“前端免费学习笔记（深入）”；
background-image: linear-gradient( to right, #3498db 0%, #3498db 30%, #f1c40f 30%, #f1c40f 70%, #e74c3c 70%, #e74c3c 100% );
关键点：
- 每段起始和结束位置必须成对出现，比如
#3498db 30%, #f1c40f 30%实现瞬切；若想软过渡，改成#3498db 28%, #f1c40f 32% - 所有色标位置必须显式写百分比，否则默认等距，无法精准卡在进度分界点
- 如果用 CSS 变量控制进度（如
--pct: 65），色标位置就得用calc()动态算，但注意 calc 不能嵌套在渐变里，得靠 JS 或构建时生成
transition background-image 会闪、卡顿，换用 opacity + 两层渐变更稳
直接对 background-image 做 transition 看似简洁，但多数浏览器不优化渐变背景的插值动画，尤其在中低端设备上容易掉帧、闪烁，甚至回退到单帧跳变。
实测更可靠的方案是双层覆盖：固定一层完整渐变背景，再叠一层同方向但只含当前进度段的渐变，用 opacity 控制第二层可见性：
.progress-fill {
background: linear-gradient(to right, #3498db, #f1c40f, #e74c3c);
}
.progress-fill::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, #3498db, #3498db, #f1c40f, #f1c40f, #e74c3c, #e74c3c);
background-size: 300% 100%;
background-position: 0 0;
opacity: 0;
transition: opacity 0.3s ease;
}JS 更新时只改 ::before 的 opacity 和 background-position，GPU 更友好，动画也顺滑得多。
移动端 Safari 对 background-clip:text + 渐变文字的支持不稳定
如果你把这套逻辑挪到进度条里的文字标签（比如显示 “65%” 的数字），想让它也随进度变色，千万别直接套 background-clip: text —— iOS 16.4 之前版本会渲染错位，iOS 17.5 后虽修复但仍有抗锯齿吃掉高光的问题，导致分段色界模糊。
替代做法更实在：
- 用 SVG
<text></text>+<lineargradient></lineargradient>，兼容性好且可控 - 拆成多个
<span></span>，按百分比范围分别加 class，各自设纯色color - 放弃文字渐变，改用阴影或描边强化可读性，重点保证进度条本体准确
分段渐变真正的难点不在写法，而在“哪一段该在哪一刻开始生效”——这需要和业务逻辑强绑定，比如加载状态、表单步骤、游戏血量，不能只盯着 CSS 色标位置调来调去。
