linear-gradient()只能用于background或background-image，不可用于background-color；旧浏览器需按-webkit→-moz→标准顺序加前缀，方向统一用to关键词，颜色推荐rgb()格式并前置fallback纯色。
直接写 linear-gradient() 在旧版 Safari、Android WebView 或 IE 中会完全失效，不是颜色不准，是压根不渲染——必须加前缀且顺序不能错，否则 fallback 会跳过渐变直接用纯色。
background-image 还是 background？别混用
linear-gradient() 是图像函数，只能用于 background-image 或复合属性 background，绝不能塞进 background-color。写错就静默忽略，DevTools 里都看不到声明生效。
- ✅ 正确（推荐）：
background: linear-gradient(to right, red, blue);——background会自动识别并设为background-image - ✅ 显式指定：
background-image: linear-gradient(to right, red, blue); - ❌ 错误：
background-color: linear-gradient(...);—— 浏览器直接丢弃整条规则 - ⚠️ 注意：如果同时写
background-color和background-image，前者只在渐变不可用时兜底，且必须写在前面才生效
前缀顺序错了，渐变就没了
浏览器从上到下解析 CSS，遇到不认识的语法就跳过。所以私有前缀必须按兼容性由差到好排列，-webkit- 放最前，标准语法放最后。顺序反了，Chrome 旧版可能跳过自己的前缀版本，直接 fallback 到下一条纯色声明。
- ✅ 正确顺序：
background: -webkit-linear-gradient(top, #fff, #000);background: -moz-linear-gradient(top, #fff, #000);background: -o-linear-gradient(top, #fff, #000);background: linear-gradient(to bottom, #fff, #000); - ⚠️
-webkit-必须在-moz-和-o-前面——Safari 5.1–6.0 只认老式-webkit-linear-gradient()，不识别后两者 - ⚠️ IE10 用
-ms-linear-gradient()；IE9 及更早只能靠filter: progid:DXImageTransform.Microsoft.gradient(...)，且需双写filter和-ms-filter
方向参数不统一，渐变就“转歪了”
top 在 -webkit-linear-gradient(top, ...) 中表示“起点在顶部”，但在标准 linear-gradient(to top, ...) 中表示“终点在顶部”，语义相反。混用会导致流向翻转，调试时看着像 bug 其实是方向逻辑冲突。
立即学习“前端免费学习笔记（深入）”；
- ✅ 统一用
to关键词：to bottom、to right、to bottom right—— 所有现代浏览器支持，语义一致 - ⚠️ 避免角度值：
0deg在标准中指向右，但旧 WebKit 解释为向上；iOS 12 及更早还不支持角度语法 - ⚠️
to top≡180deg，不是0deg；to bottom≡0deg，不是90deg
HEX 颜色在渐变里会“变色”，得锚定 sRGB
同一段 #FF6B6B，Chrome 当 sRGB 解析，Safari（尤其 macOS 广色域）可能当 Display P3 解析，插值路径完全不同，结果就是渐变色差肉眼可见。
- ✅ 强制 sRGB：
rgb(255 107 107)（空格分隔，现代语法）或rgb(255, 107, 107)（兼容写法） - ⚠️ 不要用
#FF6B6B或hsl()直接进渐变——隐式色彩空间推断不可控 - ⚠️ 渐变动画中，两个状态的颜色格式必须统一，否则 Safari 可能跳变
- ? 检测 sRGB 支持用
@supports (color: rgb(0 0 0))，比只检测linear-gradient()更准
最容易被忽略的是：颜色格式和方向关键词必须全程统一，哪怕只在一个地方用了 HEX 或混用了 top 和 to top，都可能在某个浏览器里突然失效或偏色——这不是“差不多就行”的事，是像素级的确定性问题。
