旧版浏览器（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-color fallback，例如：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() 里仍会报错或静默失效。

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

• 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。这种底层差异意味着，任何“一次编写、到处运行”的幻想，都会在真机调试时被黑块当场戳破。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！