旧版浏览器兼容 linear-gradient 的关键是 fallback 色前置、声明分离、伪元素合成层及语法规范：ie9 前置纯色并禁用简写；ios 12 避用 rgba 和 to 关键词，改用 transparent 和裸方向词；safari 断层需 ::before + translatez(0)；background 简写易清空渐变，须拆分或显式声明。
linear-gradient 在旧版浏览器里不是“不兼容”，而是被直接跳过或解析失败——关键在语法写法、声明顺序和 fallback 位置，不是加个前缀就能解决。
IE9 及更早：回退色必须写在最前面，且不能用简写
IE9 完全不认识 linear-gradient()，遇到就整条 background 声明失效。如果你写成：background: linear-gradient(to bottom, #4a6fa5, #2c4d75), #4a6fa5;，IE9 会因语法错误把整个 background 清空，结果是透明或继承父背景。
- ✅ 正确做法：分开声明，纯色放第一行：
background: #4a6fa5;然后第二行再写渐变：background: linear-gradient(to bottom, #4a6fa5, #2c4d75); - ❌ 别用
background-image单独设渐变再指望 IE 自动 fallback——它不读这条，也不管你有没有background-color - IE8–IE9 如需真渐变，只能用
filter: progid:DXImageTransform.Microsoft.gradient()，但注意：startColorstr和endColorstr必须是 8 位完整 hex（如#ff4a6fa5），#4a6fa5这种简写会被忽略
旧版 Safari（iOS 12 及更早）：别用 rgba()，方向关键词要裸写
iOS 12 Safari 解析 rgba(0,0,0,0.3) 会直接渲染为黑块，不是透明——这不是 bug，是引擎拒绝该值后的降级行为。
- ✅ 透明色统一用
transparent；如需控制灰度深浅，改用 8 位 hex：#0000004D（但 iOS 12 仍不支持，所以必须配 fallback） - ✅ 方向必须双写：
background-image: -webkit-linear-gradient(right, #000, transparent), linear-gradient(to right, #000, transparent);——-webkit-版本必须用right、bottom这类裸词，不能带to前缀 - ❌ 别混用角度和关键词：
-webkit-linear-gradient(90deg, ...)在旧 WebKit 中实际等效于to top，不是向右；写错就整条失效
旧版 Safari 断层与黑块：伪元素 + 强制合成层是刚需
灰黑断层不是颜色错了，是 Safari（iOS 12 及更早）GPU 渲染限于 16-bit 色深，导致明度接近的颜色过渡被硬截断。
- ✅ 必须用
::before伪元素承载渐变，并加transform: translateZ(0)启用高精度合成层；主元素只设background: transparent，不写任何渐变 - ✅ 伪元素需满足三要素：
content: ""、position: absolute、inset: 0（别用top/left/width/height） - ❌ 别在主元素上直接写
background: linear-gradient()——这是断层重灾区；也别指望@supports包裹能兜底，旧 Safari 根本不识别该规则
通用陷阱：别让 background 简写悄悄干掉渐变
background 是复合属性，只要没显式写出所有子项，就会重置未声明的部分。渐变常因此被清空。
- ❌ 错误：
background: #fff linear-gradient(to right, #000, transparent);→background-image被重置为空，只剩白底 - ✅ 安全写法：要么显式写全：
background: #fff no-repeat padding-box border-box linear-gradient(to right, #000, transparent);，要么拆成两行：background-color: #fff;+background-image: linear-gradient(...); - ⚠️ 注意：即使现代浏览器支持，
background: linear-gradient()本身也会覆盖之前设置的background-color，所以 fallback 色永远要写在渐变声明之前
真正麻烦的从来不是“怎么加前缀”，而是 fallback 色是否匹配设计意图、伪元素层级是否正确、以及 iOS 12 对 8 位 hex 的支持边界——这些细节不真机测试根本看不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
