旧版 safari 渐变兼容需三要素：用 transparent 替代 rgba/hsla、伪元素承载并加 transform: translatez(0)、方向词双写（right 与 to right）且前缀版在前。
检查是否在渐变中用了 rgba() 或 hsla()
旧版 Safari（iOS 12 及更早、Safari 6–12）根本不会解析 rgba(0,0,0,0.3) 这类值，而是直接当黑色渲染——这不是透明过渡，是实打实的黑块，常被误认为“脏灰”。hsla() 同理，整条渐变可能直接失效。
- 必须全部替换为
transparent（最安全）或 8 位 hex（如#0000004D），但注意 iOS 12 不支持后者，得降级 - 降级不能靠
@supports，得写在前面：background-color: #fff; background-image: linear-gradient(to right, #000, transparent); - 哪怕只在一个色标里混用
rgba()，整条渐变都可能退化为黑底
确认 linear-gradient() 是否被写在伪元素上
直接在主元素写 background: linear-gradient() 是断层重灾区。Safari 的 GPU 渲染路径会对这类声明做裁剪优化，强制降为 16-bit 色深处理，明度接近的颜色（比如 #f5f5f5 → #ffffff）必然出现灰阶带。
- 主元素只设
position: relative和background: transparent - 用
::before承载渐变：必须有content: ""、position: absolute、inset: 0 - 必须加
transform: translateZ(0)（iOS 必加），建议同时加will-change: transform
验证方向关键词是否用了 to 前缀
旧版 WebKit（iOS 5.1–6.1 / Safari 5.1–6）根本不识别 to right，只认裸词 right。写错就整条忽略，背景回退为透明或父级色，看起来像“漏了渐变”或“发灰”。
- 双写时顺序必须是：
background-image: -webkit-linear-gradient(right, #000, transparent), linear-gradient(to right, #000, transparent); -
-webkit-linear-gradient()第一个参数只能是left/right/top/bottom，禁用to和角度（如90deg） - 别把前缀版本写在后面，否则会被标准语法覆盖，而旧 Safari 又不认标准语法，结果还是空
排查是否用了 background 简写覆盖了渐变
写 background: #fff linear-gradient(...) 看似省事，实则危险。CSS 规范规定 background 会重置所有子属性，包括 background-image——你没显式写出渐变层，它就被清空了，只剩纯色底，甚至因 fallback 逻辑变黑。
- 永远分开写：
background-color: #fff;+background-image: linear-gradient(...); - 如果用了
background-blend-mode，更要拆开：底层色用background-color，上层渐变用background-image，否则混合计算会出偏色 - 移动端真机调试时，打开 DevTools 检查 computed 样式里的
background-image是否真的存在，而不是只看 declaration 面板
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
