旧版浏览器（iOS 12 Safari、IE8–IE9）不支持 linear-gradient() 中的 rgba() 和 8 位 HEX，因其 CSS 解析器直接忽略非法颜色导致渐变失效，须用 transparent 或纯色 fallback，并严格遵循前缀顺序、禁用简写、避免语法错误。
旧版浏览器（尤其是 iOS 12 Safari 和 IE8–IE9）不支持在 linear-gradient() 中直接使用 rgba() 或 8 位 HEX（如 #RRGGBBAA），根本原因不是“写法错”，而是其 CSS 解析器压根不识别这些颜色格式——遇到就跳过整条声明，回退为黑色或透明背景。
iOS 12 Safari 把 rgba() 当黑块是因为解析失败
它对 linear-gradient() 内的颜色值做严格语法校验：一旦碰到 rgba(0,0,0,0.3) 或 #0000004D，就判定为非法 token，整条渐变声明被丢弃，background-image 回退为空，而元素若无 background-color，就会透出父级背景或显示默认黑（取决于渲染上下文）。
- 必须用
transparent替代所有半透色，它是唯一被 iOS 12 全面接受的透明关键词 - 如果必须控制灰度深浅，只能降级为纯色 +
background-colorfallback，例如：background-color: #333; background-image: linear-gradient(to right, #000, transparent); -
@supports (background: rgba(0,0,0,0))在 iOS 12 里根本不执行，别指望它能兜底
IE8–IE9 不认 8 位 HEX 是因为语法层缺失
IE8 的 CSS 解析器只认标准 3/6 位 HEX、命名色和 rgb()；#RRGGBBAA 属于 CSS Color Module Level 4，在 IE 系列中直到 Edge 16 才开始部分支持。IE9 虽支持 rgba()，但仅限于 background-color 等单色属性，linear-gradient() 里仍会报错或静默失效。
- IE8 必须靠
filter: progid:DXImageTransform.Microsoft.gradient(...)模拟单色透明，且仅支持startColorstr/endColorstr用 8 位格式（如#7f000000） - IE9 可用
background-image: -ms-linear-gradient(...)，但颜色仍限于#hex、red、transparent，不能混入rgba() - 千万别把
filter和rgba()写在同一规则里——IE8 会同时尝试两者，导致颜色异常甚至全黑
为什么双写 -webkit-linear-gradient 还是黑？
因为前缀版本和标准版本是独立解析的，旧 WebKit 引擎对 -webkit-linear-gradient() 的容错极低：一个括号错位、一个单位漏写（比如 20 而非 20%）、或用了它不认的颜色格式，整条声明就被忽略，浏览器继续往下找——结果找到的是后面那条无效的 linear-gradient()，最终啥都不渲染。
立即学习“前端免费学习笔记（深入）”；
- 方向只能用
to top/to right等关键词，禁用角度（90deg会被 IE9–iOS 6 直接拒收） - 颜色列表必须全用兼容格式：
#000、transparent、red，禁用rgba()、hsla()、8 位 HEX - 正确顺序必须是：
background-image: -webkit-linear-gradient(...), linear-gradient(...);，前缀在前，否则现代浏览器会覆盖掉前缀版本
background 简写一用就黑，是属性重置机制在起作用
background 是复合属性，它会**重置所有子属性**，包括 background-image。如果你写 background: #fff linear-gradient(...)，但没显式写出 background-image，那渐变层就被清空了，只剩 #fff 底色；更糟的是，若该简写出现在旧浏览器中且 linear-gradient() 失效，整个 background 声明可能被跳过，导致背景彻底丢失。
- 永远分开写：
background-color+background-image，避免简写 - 若必须用简写，确保每个子属性都显式声明，例如：
background: #fff url(...) no-repeat center / cover; - 渐变类组件建议封装为 CSS 自定义属性 + JS 动态注入，绕过静态解析限制
真正麻烦的从来不是“怎么写”，而是不同浏览器对同一段 CSS 的解析路径完全不同——iOS 12 把 rgba() 当语法错误，IE8 把整条 linear-gradient() 当不存在，而 Chrome 却能完美渲染 8 位 HEX。这种底层差异意味着，任何“一次编写、到处运行”的幻想，都会在真机调试时被黑块当场戳破。
