必须显式声明渐变方向，如to right或45deg；容器需设min-height:100vh和background-repeat:no-repeat；必加fallback背景色；移动端慎用background-attachment:fixed。
方向写法必须显式声明，不能只写颜色
直接写 linear-gradient(red, blue) 看似简洁，但 Safari 5.1–6.0、部分 Android WebView 会因语法歧义退化成纯色甚至空白。浏览器默认方向是 to bottom，但不写就等于放弃兼容性控制。
正确做法是：用关键词如 to right（左→右）、to bottom right（左上→右下），或角度如 45deg（单位 deg 不可省）。注意拼写：to right 不是 right，to bottom right 中间有空格，不是连字符。
-
to top right= 渐变从左下到右上（起点在左下角） -
to bottom right= 渐变从左上到右下（符合多数设计意图） - 角度写法更可控：
135deg等价于to bottom right，但语义更明确
容器高度不足会导致色带条纹，不是渐变本身出错
常见现象是背景出现红蓝交替的横向条纹，而非平滑过渡——问题不在 CSS 写错，而在元素实际渲染高度太小。空 或未设高度的 <div> 默认只有内容高度（可能仅几像素），导致渐变被重复平铺（<code>background-repeat: repeat 是默认行为）。
解决方式很简单：
- 加
min-height: 100vh强制撑满视口 - 加
margin: 0防止 body 默认外边距造成白边 - 显式写
background-repeat: no-repeat，比依赖简写更可靠
推荐组合：background: linear-gradient(to bottom right, #ff6b6b, #4ecdc4); min-height: 100vh; margin: 0; background-repeat: no-repeat;
必须加 fallback 背景色，否则解析失败就露白底
任何语法错误——漏逗号、错单位（比如写 45 不是 45deg）、非法 HSL 值——都会让整条 background 声明被浏览器丢弃，退回到父级背景或透明，页面瞬间“露底”。
安全写法永远是两行：
background: #6a11cb;<br>background: linear-gradient(to right, #ff6b6b, #4ecdc4);
第一行是降级色，IE9 或解析失败时生效；第二行覆盖它。不要图省事合并成一行简写，background 简写会隐式重置 background-repeat 和 background-size，反而埋坑。
移动端慎用 background-attachment: fixed
想做视差滚动？加 background-attachment: fixed 在 iOS Safari 上大概率触发 WebKit 渲染缺陷：闪烁、错位、白屏。这不是性能卡顿，是底层管线 Bug，模拟器还复现不了。
真机调试前务必连上 Safari 开发者工具看 iPhone 实时表现。替代方案有两个：
- 去掉
fixed，用transform: translateZ(0)触发硬件加速，再配合 JS 监听scroll动态改background-position - 放弃视差，用
@keyframes驱动渐变色循环变化，更轻量也更稳
最容易被忽略的是 HSL 插值：浏览器默认按 RGB 插值，red 到 blue 中间会经过灰暗带；要顺滑鲜艳，得手动写 hsl(0, 100%, 50%) → hsl(240, 100%, 50%)，且 s 和 l 后必须跟 % 符号。
