用 background-image 配合 linear-gradient 是唯一靠谱方案：CSS 无原生动态渐变，需 JS 控制 CSS 变量或切换 class 触发动画，避免频繁修改内联样式；推荐用 HSL 插值、避开 iOS fixed 渲染 Bug。
用 background-image 配合 linear-gradient 是唯一靠谱方案
CSS 里没有“动态渐变”这个原生属性，所谓动态，本质是靠 JS 控制 CSS 变量或重写 background-image 值，再配合 transition 或 animation 实现视觉变化。直接写死在 HTML 里（比如用 <div style="background: ...">）无法响应式更新，也压根不支持动画。必须走 CSS 层控制，JS 只负责驱动。
<h3>别用 <code>setInterval 频繁改 style.backgroundImage
这是新手最常踩的坑：每 50ms 调一次 element.style.backgroundImage = 'linear-gradient(...)' ，结果卡顿、掉帧、CPU 占用飙升。浏览器对内联样式的频繁重写极其敏感，且无法利用 GPU 加速。
- 正确做法是定义好 CSS 动画关键帧，用
@keyframes写好渐变色停靠点，再通过 JS 切换 class 触发动画 - 或者只用一个
background-image，把所有颜色逻辑塞进单个linear-gradient，再用background-position或background-size移动它（适合平滑流动效果） - 若真要 JS 控制颜色值，请改 CSS 自定义属性（
--grad-color-1），再让background-image: linear-gradient(var(--grad-color-1), var(--grad-color-2))响应式更新——这样浏览器能优化渲染流水线
linear-gradient 的颜色插值默认是 HSL 模式，但你写的是 RGB
当你写 linear-gradient(red, blue)，浏览器内部其实是按 RGB 插值计算中间色。这会导致某些过渡（比如红→青→紫）出现灰暗、脏色。不是 bug，是预期行为。
- 想更顺滑、鲜艳的过渡，手动指定 HSL 值：
linear-gradient(hsl(0, 100%, 50%), hsl(240, 100%, 50%)) - 注意：HSL 的色相（h）是 0–360，饱和度（s）和亮度（l）是百分比，别漏 % 符号
- Chrome 和 Safari 支持
color-mix(in hsl, ...)，但目前兼容性差，别在线上项目用
移动端 iOS Safari 对 background-attachment: fixed + 渐变组合有渲染 Bug
在 iPhone 上，如果渐变背景加了 background-attachment: fixed（比如做视差滚动），iOS 16.4 之前会出现闪烁、错位甚至白屏。这不是性能问题，是 WebKit 渲染管线的已知缺陷。
立即学习“前端免费学习笔记（深入）”；
- 绕过方法：去掉
fixed，改用transform: translateZ(0)强制硬件加速，再用 JS 监听scroll手动更新background-position - 或者直接放弃视差，用纯
animation循环播放渐变色（更稳） - 测试时务必真机连 Safari 开发者工具调试，模拟器不复现该问题
渐变本身不难，难的是跨设备一致性和性能边界。多数线上翻车，都出在“以为改个颜色就行”，结果没考虑插值模式、没避开 iOS 渲染陷阱、也没意识到内联样式更新的代价。动手前先问自己：这个动效是否真需要 JS 驱动？能不能用纯 CSS 关键帧收口？
