因为彩虹是红橙黄绿青蓝紫的连续过渡，linear-gradient只写两个颜色会跳过中间色相导致偏粉紫；必须用hsl定义至少6个色标并按视觉敏感度非等分设置位置，配合overflow:hidden和自定义dom结构实现，且需注意ios safari多色渐变兼容性问题。
为什么 linear-gradient 做彩虹进度条不能只写两个颜色
因为彩虹是红橙黄绿青蓝紫的连续过渡，用 linear-gradient(red, purple) 会跳过中间色相，实际渲染出来偏粉紫，根本不像彩虹。必须显式定义至少6个关键色标，控制每个色相出现的位置。
实操建议：
- 用 HSL 色系比 RGB 更容易控制色相连续性，比如
hsl(0, 100%, 50%)（红）→hsl(60, 100%, 50%)（黄）→ … →hsl(300, 100%, 50%)（紫） - 色标位置别用等分（如 0%, 16.6%, 33.3%…），HSL 色相过渡在 120°–240° 区间视觉变化快，青到蓝那段要压缩色标间距，否则绿色区域过大、青色被吃掉
- 进度条容器需设
overflow: hidden，否则渐变超出部分会溢出显示
如何让 progress 元素正确应用多色 linear-gradient
原生 <progress></progress> 的样式受限严重：WebKit 内核（Chrome/Safari）只允许通过 ::-webkit-progress-bar 和 ::-webkit-progress-value 伪元素控制，且 ::-webkit-progress-value 不支持直接设背景渐变——它只会把渐变当整体平铺，不随进度缩放。
实操建议：
- 放弃原生
<progress></progress>，改用<div class="progress-bar"><div class="progress-fill"></div></div>结构 -
.progress-fill设background: linear-gradient(...)，再用width或transform: scaleX()控制填充比例 - 若坚持用原生
<progress></progress>，只能对::-webkit-progress-value设单色背景，再叠加一层绝对定位的渐变遮罩层模拟效果——但兼容性和可访问性下降
linear-gradient 中色标单位用百分比还是像素
用百分比。进度条宽度动态变化时，像素值会导致渐变错位或拉伸失真。比如设 background: linear-gradient(to right, red 0px, orange 20px, ...)，当父容器缩到 100px 宽时，20px 处的橙色可能还没出现就结束了。
实操建议：
- 所有色标统一用
%，按色相分布比例分配：红 0%，橙 15%，黄 30%，绿 45%，青 60%，蓝 75%，紫 90%，再回到红 100%（形成闭环过渡） - 避免写成
red 0%, orange 14.28%这种机械等分，人眼对黄绿区域更敏感，黄→绿区间可设为 25%→40%，留出缓冲 - 加
background-size: 200% 100%配合background-position动画时，色标仍用 %，否则动画会抖动
移动端 Safari 对多色 linear-gradient 的兼容陷阱
iOS 15.4 之前，Safari 解析含 6+ 色标的 linear-gradient 会崩溃或渲染空白，不是语法错误，而是渲染引擎内存越界。现象是进度条突然消失，控制台无报错。
实操建议：
- 降级方案：用 CSS 变量 +
@supports (background: linear-gradient())检测，对旧 Safari 回退为 4 色渐变（红→黄→蓝→紫） - 绕过方式：把彩虹拆成两段渐变，用
mask-image叠加裁切，但 iOS 14.5+ 才支持mask-image，需双重检测 - 真机测试必做：Simulator 里正常 ≠ 真机正常，iOS WebKit 的 gradient 渲染路径和桌面版不同
渐变色标顺序、单位、伪元素限制、移动端渲染边界——这四个点漏掉任何一个，彩虹进度条就会在某个环境里变成一道灰线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
