用CSS的linear-gradient()可实现纯色渐变，需显式声明方向（如to right或45deg），正确分隔颜色并加fallback底色，避免transparent兼容问题；移动端慎用fixed，HSL插值应手动控制。
直接用 background 或 background-image 配合 linear-gradient() 就能实现，不需要 JS、不用图片、不依赖 HTML 属性——HTML 本身根本不支持渐变，全靠 CSS。
写法必须带方向或角度，否则可能失效
linear-gradient() 默认方向是 to bottom（上→下），但如果你只写 linear-gradient(red, blue)，看似省事，其实隐患大：老版 Safari 和部分 Android WebView 会因解析歧义而回退成纯色甚至空白。显式声明方向更稳。
- 推荐用关键词：
to right（左→右）、to bottom right（左上→右下） - 角度更可控：
45deg（右上斜向）、120deg（偏左下），注意单位必须带deg，写45不生效 - 别拼错关键词：不是
right，是to right；不是bottom-right，是to bottom right
颜色值之间必须用逗号分隔，且需降级 fallback
浏览器遇到语法错误（比如漏逗号、错单位、非法 HSL 值）会整个丢弃该条 background 声明，退回到父级背景或透明——页面就“露底”了。
- 正确写法：
background: linear-gradient(to right, #ff6b6b, #4ecdc4); - 务必加 fallback：
background: #6a11cb; background: linear-gradient(to right, #ff6b6b, #4ecdc4);，IE9 或 CSS 解析失败时至少有个底色 - 透明色慎用
transparent：Safari 5.1–6.0 需换成rgba(0,0,0,0)才可靠
移动端 iOS 上 background-attachment: fixed 是雷区
如果想让渐变背景固定（比如做视差滚动），加 background-attachment: fixed 在 iPhone 上大概率触发 WebKit 渲染 Bug：闪烁、错位、甚至白屏。这不是卡顿，是底层管线缺陷，模拟器还复现不了。
立即学习“前端免费学习笔记（深入）”；
- 绕过方案一：去掉
fixed，改用transform: translateZ(0)强制硬件加速 + JS 监听scroll动态调background-position - 绕过方案二：放弃视差，用
@keyframes循环动画驱动渐变色变化（更轻量、更稳） - 真机调试必开 Safari 开发者工具连 iPhone，别信模拟器表现
最易被忽略的是 HSL 插值问题：你写 red 和 blue，浏览器按 RGB 插值，中间会经过灰暗带；要顺滑鲜艳，得手动写 hsl(0, 100%, 50%) → hsl(240, 100%, 50%)，且 s 和 l 后必须跟 % 符号。
