linear-gradient在ios 12及更早、android 4.4 webview、x5内核中失效，因解析rgba()或to方向词会直接跳过整条声明致黑块；须用transparent+裸方向词（如right）、双前缀分离声明、伪元素+translatez(0)合成层规避断层。
老版本移动浏览器（iOS 12 及更早、Android 4.4 WebView、微信内置 X5 内核早期版）不支持标准 linear-gradient 语法，直接写会静默失效或渲染为黑块/断层——关键不是加前缀就能解决，而是必须拆解方向、颜色、合成层三要素。
为什么 linear-gradient(to right, #000, transparent) 在 iOS 12 上变黑块？
iOS 12 Safari 解析 rgba() 或带 to 的方向词时直接跳过整条声明，降级为纯黑；transparent 是唯一安全的透明色，但必须配合裸方向词（如 right），不能混用 to right 或角度。
-
background-image: -webkit-linear-gradient(right, #000, transparent)✅ 安全 -
background-image: -webkit-linear-gradient(to right, #000, transparent)❌ 失效 -
background-image: -webkit-linear-gradient(90deg, #000, rgba(0,0,0,0))❌ 黑块（rgba()被拒）
旧 Android WebView 和 X5 内核要求双前缀 + fallback 分离
Android 4.4 WebView 认得 -webkit-linear-gradient，但不认识标准语法；X5 内核（微信 7.0.18 前）甚至忽略 background 简写中的渐变，只读 background-image。
- 必须显式写
background-image，不能只靠background: linear-gradient(...) - 顺序要严格：
background-color必须在最前（fallback），然后是background-image: -webkit-linear-gradient(...)，最后才是background-image: linear-gradient(...) - 示例：
background-color: #f0f0f0;<br>background-image: -webkit-linear-gradient(left, #f0f0f0, #ccc);<br>background-image: linear-gradient(to right, #f0f0f0, #ccc);
锯齿与断层：Safari 渐变必须用伪元素 + 合成层
iOS 12 及更早版本 GPU 渲染限于 16-bit 色深，直接在元素上写渐变必然出现灰阶断层；transform: translateZ(0) 单独加无效，必须和 ::before + content: "" + inset: 0 组合生效。
- 主元素只设
position: relative; background: transparent; - 伪元素需三要素齐备：
content: ""、position: absolute、inset: 0 - 必须同时加
transform: translateZ(0)和will-change: transform，缺一不可
真正麻烦的不是语法本身，而是同一行 CSS 在 iOS 12、Android 4.4、X5 内核里被解析的路径完全不同——to 关键词、rgba、简写属性、合成策略，任何一项错位都会导致渐变消失或崩坏。别依赖自动前缀工具，手写时每个分号都要想清楚它在哪个引擎里怎么执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
