旧版 webkit 将 0deg 解释为从左向右，而标准定义 0deg 为从下到上，属历史实现差异；应弃用角度值，统一使用 to + 单关键词（如 to right）并严格按前缀顺序书写以确保兼容。
旧版 WebKit（如 Safari 5.1–6.1、iOS 6–7）把 0deg 当成向右，标准语法却定义 0deg 指向上
这不是 bug，是历史实现差异。W3C 标准规定 0deg 表示渐变线从下往上（即等价于 to top），但早期 WebKit 内核（包括 Windows Safari 和旧 iOS WebView）反过来了：0deg 被解释为从左向右，和 to right 等价。这就导致同一行代码在不同环境里方向完全相反。
-webkit-linear-gradient(90deg, ...) 和 linear-gradient(to right, ...) 在旧 Safari 里效果一致，但和现代浏览器不兼容
因为旧 WebKit 的角度系统和标准是镜像关系：它的 90deg ≡ 标准的 0deg，它的 0deg ≡ 标准的 90deg。所以：
-
-webkit-linear-gradient(0deg, red, blue)→ 实际从左到右 -
linear-gradient(0deg, red, blue)→ 实际从下到上（现代浏览器） - 混用时，比如同时写两条规则且顺序错乱，Chrome 旧版可能跳过自己的前缀版本，直接 fallback 到纯色
为什么不能统一用 to 关键词兜底？
to 关键词本身在旧 WebKit 中支持良好，但有硬限制：
-
-webkit-linear-gradient()不接受to left top这类双关键词，只认单个left、right、top、bottom -
to bottom right在 Safari 6.0 及更早、Android 4.3 WebView 中完全不识别，必须换算成角度并慎用（iOS 12 前也不支持角度） - IE10 支持无前缀
linear-gradient()，但它只认to bottom，不认bottom（漏掉to就失效）
调试时最常踩的坑：DevTools 里看不出方向错，只看到“没渐变”
方向写错不会报错，而是静默降级——尤其是当 background-color 和 background-image 同时存在，且前者写在后面时，fallback 机制根本不会触发。实际表现就是背景一片纯色，连渐变边都看不到。要确认是否方向问题，建议：
- 临时删掉所有前缀，只留
background: linear-gradient(to right, red, blue);，看是否生效（可快速判断是否卡在旧内核） - 在 Safari 6 或 iOS 7 模拟器中验证
-webkit-linear-gradient(right, ...)是否真向右，而不是向上 - 别信“看起来差不多”——
to right和90deg在小尺寸容器边缘色标定位上存在像素级偏差，设计稿对齐时尤其明显
to + 单关键词 + 严格前缀顺序这三板斧，少一个都可能在某个老设备上白屏。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
