旧版 Safari 中 linear-gradient 渲染黑块主因是 rgba() 透明色不被支持，应改用 transparent 或 8 位 hex（iOS 12 仍不支持需降级），并双写 -webkit-linear-gradient 与标准语法、分开声明 background 属性、避免简写清空渐变。
旧版 Safari 里 linear-gradient 渲染成黑块，基本就是 rgba() 透明色没兜住
iOS 12 及更早的 Safari（包括部分微信内置 WebView）对 rgba() 在 linear-gradient() 中的支持极弱——它会把无法解析的透明色直接当成黑色渲染，而不是忽略或降级。这不是渐变方向写错，也不是漏了 to，而是颜色值本身被引擎拒收了。
- 别用
rgba(0, 0, 0, 0.3)或hsla(0, 0%, 0%, 0.3)：这些在 iOS 12 Safari 中大概率触发黑块 - 改用
transparent关键字：它被所有支持linear-gradient的浏览器无条件支持 - 如果必须用半透色（比如要控制灰度深浅），统一换 8 位十六进制：
#0000004D（等价于rgba(0,0,0,0.3)），Chrome/Firefox/Edge 都认，iOS 13+ 也支持；但 iOS 12 仍不支持，所以得配降级 - 降级方案必须写在前面：
background-color: #fff; background-image: linear-gradient(to right, #000, transparent);，不能靠@supports包裹——旧 Safari 根本不识别这个规则
为什么加 -webkit-linear-gradient 还是黑？因为前缀和颜色格式冲突
给旧 Safari 加 -webkit-linear-gradient() 是必要动作，但它不是万能解药。问题常出在：你加了前缀，却还在里面用 rgba() —— 老 WebKit 引擎对 rgba() 的解析比标准语法更严格，甚至会因一个括号位置不对就整条声明失效，回退为纯黑背景。
- 前缀版本只接受最简颜色格式：
#000、red、transparent，拒绝rgba()和 8 位 hex - 方向只能用
to top/to right等关键词，禁用角度（如90deg），否则前缀版本直接被忽略 - 正确写法必须双写，且顺序固定：
background-image: -webkit-linear-gradient(to right, #000, transparent), linear-gradient(to right, #000, transparent); - 千万别把前缀写在后面：
linear-gradient()会覆盖-webkit-linear-gradient()，而前者在旧 Safari 里又不生效，结果还是黑
background 简写一用就黑，是因为渐变被清空了
很多人写 background: #fff linear-gradient(to right, #000, transparent); 后发现渐变没了、只剩白底，甚至整个背景变黑。这不是 CSS 解析错误，是 background 简写属性的语义规则：它会**重置所有子属性**，包括 background-image。你没显式写出渐变层，它就被干掉了。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 安全做法永远是分开写：
background-color: #fff;+background-image: linear-gradient(...); - 非要用简写，必须把渐变放在最前面：
background: linear-gradient(to right, #000, transparent), #fff;—— 后面的#fff是 fallback 背景色，仅当渐变完全失效时才启用 - 注意逗号分隔：多个背景层之间用逗号，不是空格；漏掉逗号会导致整个声明无效，旧 Safari 就容易渲染成黑
- 如果容器有
border-radius或padding，记得加background-clip: padding-box;，否则黑边可能来自渐变溢出到 border 区域
测试时看到黑块，先关掉构建工具的 autoprefixer 剥离逻辑
现代前端工程中，autoprefixer 默认会剔除无前缀的 linear-gradient，只留带前缀的版本——这在旧 Safari 上反而导致双重失效：前缀版因颜色格式被拒，无前缀版又被工具删了。结果就是空背景，渲染引擎填黑。
立即学习“前端免费学习笔记（深入）”；
- 检查构建输出的 CSS，确认是否同时存在
-webkit-linear-gradient()和linear-gradient() - 在 autoprefixer 配置里显式保留标准语法：
"last 2 versions, iOS ，避免它“好心办坏事” - 本地调试时，临时禁用 autoprefixer，手写双版本验证是否真由颜色格式引发黑块
- 真机测试不可替代：模拟器对透明色的容错远高于真实 iOS 12 设备
最易被忽略的是：你以为改了颜色格式就完了，其实旧 Safari 对空格、逗号、单位的敏感度远超预期——多一个空格、少一个百分号、0% 写成 0，都可能导致整条渐变被丢弃，然后默默填黑。动手前先复制粘贴标准写法，再微调。
