linear-gradient前缀需按浏览器内核适配方向参数：webkit用left为起点，gecko/presto用right为终点，标准语法用to right；必须分层书写且顺序不可颠倒，background-color不支持渐变值，多色停点旧前缀不支持百分比。
linear-gradient 的前缀写法必须按浏览器内核对齐方向参数
不同浏览器对 linear-gradient 第一个参数的理解不一致：WebKit（Chrome/Safari/旧安卓 WebView）把 left 当作起点，而 Gecko（Firefox）和 Presto（旧 Opera）把 right 当作终点，标准语法则用 to right 表示终点方向。混写会导致渐变反向或错位。
正确做法是为每个前缀单独适配方向：
-
-webkit-linear-gradient(left, red, blue)→ 起点在左，向右渐变 -
-moz-linear-gradient(right, red, blue)→ 终点在右，等价于从左向右 -
-o-linear-gradient(right, red, blue)→ 同 Firefox，终点在右 -
linear-gradient(to right, red, blue)→ 标准语法，终点在右，必须放在最后
注意：Safari 9.1 及更早版本会把 to top 解析成 270deg，而 Chrome 58–67 当作 0deg，所以不要混用 to top 和 0deg。
IE10+ 和旧 Android WebView 必须加 -ms- 和 -webkit- 前缀
IE10/11 只识别 -ms-linear-gradient(top, #fff, #000)；Android 4.3 WebView（系统级 WebKit）只支持 -webkit-linear-gradient(0deg, #fff, #000)，且这里的 0deg 指向上方（与标准相反），不是向右。
实际兼容写法要分层覆盖：
- 先写
background: -ms-linear-gradient(top, #fff, #000);（IE10/11） - 再写
background: -webkit-linear-gradient(0deg, #fff, #000);（Android 4.3、iOS 11.4 Safari） - 最后写
background: linear-gradient(to top, #fff, #000);（现代浏览器）
顺序不能颠倒，否则旧浏览器可能跳过所有声明。
background-color 写 linear-gradient() 会静默失效
这是最常踩的坑：linear-gradient() 返回的是图像值（<image></image>），不是颜色值（<color></color>），所以不能用于 background-color。
错误写法直接被忽略：
❌ background-color: linear-gradient(to right, red, blue);
正确写法有两种：
- 用复合属性：
background: linear-gradient(to right, red, blue);（推荐，自动设为background-image） - 显式指定：
background-image: linear-gradient(to right, red, blue);
如果需要 fallback 纯色，background-color 必须写在 background-image 之前，否则不会生效。
多色停点和透明度在旧前缀里写法不统一
标准语法中 red 20%, blue 80% 是合法的，但旧前缀不支持百分比位置，只能靠重复颜色模拟（如 red, red 20%, blue 20%, blue）；rgba() 在所有前缀中都支持，但 IE9– 不支持透明通道。
典型兼容写法示例：
.box {<br> background: -webkit-linear-gradient(left, rgba(255,0,0,0.8), rgba(0,0,255,0.8));<br> background: -moz-linear-gradient(right, rgba(255,0,0,0.8), rgba(0,0,255,0.8));<br> background: linear-gradient(to right, rgba(255,0,0,0.8), rgba(0,0,255,0.8));<br>}
注意：Firefox 3.6–15 不支持 to right，必须用 right；Chrome 1–9 还要用 -webkit-gradient(linear, left top, right top, from(red), to(blue))，已基本淘汰，除非还要支持 2011 年前的设备。
真正麻烦的从来不是写多少行前缀，而是旧 WebView 对角度和方向的坐标系偏移——比如 iOS 11.4 的 WKWebView 把 to bottom 渲染成带锯齿的跳跃过渡，这种问题没法靠加前缀解决，得换思路用 SVG 或 canvas fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
