CSS linear-gradient中彩虹色需用十六进制值：#ff0000、#ff7f00、#ffff00、#00ff00、#00ffff、#0000ff、#4b0082，并显式设置8个等距色标（0%,14.3%,...,100%），优先to right方向，统一用6位十六进制确保跨浏览器准确。
linear-gradient里怎么写红橙黄绿青蓝紫的彩虹顺序
直接给结论：CSS 的 linear-gradient 本身不认“红橙黄绿青蓝紫”这种中文名，得用十六进制、rgb 或预定义英文色名。而且“青”在 CSS 里没有对应标准色名（cyan 是青色，但偏蓝绿，不是传统彩虹里的“青”），容易配错；“紫”用 purple 会偏红，更接近品红，不是光谱末端的蓝紫色。
实操建议：
- 用十六进制确保准确：
#ff0000（红）、#ff7f00（橙）、#ffff00（黄）、#00ff00（绿）、#00ffff（青，即 cyan）、#0000ff（蓝）、#4b0082（靛蓝 indigo，比purple更接近光谱紫） - 色标必须显式声明位置，否则浏览器会平均分配，导致橙、青等过渡过快——推荐用等距百分比：
0%, 14.3%, 28.6%, 42.9%, 57.2%, 71.5%, 85.8%, 100% - 别偷懒只写 7 个颜色：7 色需要 8 个色标（起点 + 6 个中间点 + 终点），少一个就会拉伸最后一段，紫变淡或消失
为什么用 rgb(255,0,0) 写红不如 #ff0000 稳定
看起来一样，但实际有坑：部分旧版 Safari 和某些安卓 WebView 对 rgb() 解析时会四舍五入小数，而渐变计算中颜色插值是浮点运算，微小误差会在长距离渐变里被放大，尤其在绿→青→蓝段容易出现灰蒙蒙的断层。
实操建议：
- 统一用 6 位十六进制（如
#ff0000），避免rgb()、hsl()或英文色名（red、blue） - 所有颜色都转成 sRGB 标准值，别依赖设计工具导出的 display-p3 色值（比如 Figma 默认输出的
#ff0000在非 P3 屏幕上可能发暗） - 如果必须用变量，用 CSS 自定义属性时也存十六进制：
--rainbow-red: #ff0000;，别存rgb(255,0,0)
background: linear-gradient(to right, ...) 渐变方向影响彩虹观感
横向渐变（to right）最符合“彩虹横跨天空”的直觉，但实际在网页里常被容器宽度压缩，导致颜色挤在一起看不清橙、黄细节；纵向（to bottom）则容易让紫和红在首尾被截断，尤其在移动端视口高度有限时。
实操建议：
- 优先用
to right，并配合background-size: 400% 100%+background-position: 0% 50%做平滑循环动画（如果需要动效） - 静态背景务必设
background-size: 100% 100%，否则默认按容器宽高拉伸，打乱色标比例 - 在 flex 或 grid 容器里，确认父元素没设
overflow: hidden——它会裁掉渐变边缘，让紫或红突然消失
兼容性：IE 和老 Android Browser 怎么办
IE10+ 支持 linear-gradient，但语法要带 -ms- 前缀，且不支持多色标百分比写法（只认关键字如 from/to 或两个颜色）。Android 4.3 及以下的原生浏览器连前缀都不认，会直接回退成纯色。
实操建议：
- 底线方案：用
background-color: #4b0082;（最深的紫）作兜底，至少保证文字可读 - 真要兼容 IE10，得写两行：
background: -ms-linear-gradient(left, #ff0000 0%, #ff7f00 14.3%, ...);然后下一行覆盖标准语法 - 别试图用 PostCSS 自动加前缀——它处理不了色标百分比的 IE 降级逻辑，这部分必须手写
真正难的不是写对七个颜色，而是让“青”不发绿、“紫”不发粉、整条渐变在不同缩放比例下都不断层。调色时盯着同一块背景，在 100%、125%、150% 缩放下各看 10 秒，比对着色卡调数值管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
