纯CSS可实现平滑彩虹效果：用linear-gradient按光谱顺序设红橙黄绿青蓝紫（#ff0000至#8b00ff），配合background-size:200% 200%和background-position动画，避免色值错误与尺寸失真。
纯 CSS 就能做出平滑、可复用的彩虹效果，不需要 JS 或图片，关键在 background + linear-gradient 的多色组合与动画控制。
用 linear-gradient 手动写六色彩虹背景
浏览器不认“彩虹”这个关键词，得自己按光谱顺序列出红橙黄绿青蓝紫——注意不是随便挑六个颜色，顺序和色值影响过渡自然度：
background: linear-gradient(90deg, #ff0000, /* 红 */ #ffa500, /* 橙 */ #ffff00, /* 黄 */ #00ff00, /* 绿 */ #00ffff, /* 青 */ #0000ff, /* 蓝 */ #8b00ff /* 紫 */ );
常见错误是漏掉 #8b00ff（紫）直接跳到 #ff00ff（品红），导致光谱断裂；也有人把青（#00ffff）写成天蓝（#add8e6），视觉上就“不像彩虹”。
- 角度用
90deg实现水平彩虹，180deg是垂直方向 - 如果元素宽高不固定，建议加
background-size: 200% 200%;为后续动画铺垫 - 别忘了加
background-clip: text;+color: transparent;做文字彩虹效果
让彩虹动起来：用 @keyframes 平移渐变位置
静态渐变不够“流动感”，核心技巧是动画 background-position，而不是改颜色——改颜色会闪烁、卡顿、兼容性差：
立即学习“前端免费学习笔记（深入）”；
@keyframes rainbow-move {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
<p>.rainbow {
background: linear-gradient(90deg, #ff0000, #ffa500, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
background-size: 200% 200%;
animation: rainbow-move 4s ease-in-out infinite;
}这里 background-size: 200% 200% 是关键：它让渐变图案比容器大一倍，background-position 才能平滑扫过全色带。若只写 100% 100%，动画会卡在边界、出现色块跳变。
- 时间调太短（如
1s）会晕眩，太长（8s）像静止；3–5s是舒适区间 -
ease-in-out比linear更接近真实光波流动节奏 - IE 不支持
background-clip: text，如需兼容，得用 SVG 或伪元素降级
响应式彩虹：适配不同屏幕宽度的 trick
固定 background-size: 200% 200% 在小屏上容易拉伸失真，尤其横幅类组件。稳妥做法是用 vw 单位锚定渐变宽度：
.rainbow-responsive {
background: linear-gradient(90deg, #ff0000, #ffa500, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
background-size: 140vw 200%; /* 140vw 覆盖所有可能视口宽度 */
background-position: -20vw 50%; /* 起始偏移防左端露白 */
animation: rainbow-move 5s ease-in-out infinite;
}140vw 是经验值：iPhone SE 宽 375px → 140×3.75≈525vw，足够覆盖从窄屏到 4K 横向滚动区域。硬写 1000px 在超宽屏上会截断，在折叠屏上又溢出。
- 不用
100vw，因为垂直滚动条会吃掉一部分宽度，导致右侧露底色 -
background-position: -20vw是为了动画第一帧不从纯红色开始，观感更连续 - 如果容器有
border-radius，记得加overflow: hidden，否则渐变边缘会外溢
真正难的不是写出彩虹，而是控制它的节奏、尺寸和边界行为——比如在 flex 容器里缩放时 background-size 是否重算，或者 Safari 对 background-clip: text 的 repaint bug。这些细节不报错，但会让效果在某个机型上突然“卡住”或“褪色”。
