旧版 Safari 中 linear-gradient 不显示是因浏览器静默丢弃声明，需用 -webkit-linear-gradient 且严格遵循颜色格式（禁用 rgba/hsla/8位hex）、方向写法（left/bottom 等无 to 前缀）、双写顺序及伪元素方案规避色带。
为什么加了 -webkit-linear-gradient 还是空白或黑块
加前缀只是必要条件，不是充分条件。老 WebKit 对颜色格式和方向写法极其挑剔，一个不合规就整条失效：
-
rgba()和hsla()在-webkit-linear-gradient()中直接被拒收，渲染为黑色（不是透明） - 方向必须用
top/bottom/left/right，不能带to前缀，也不能写90deg -
-webkit-linear-gradient()必须写在标准linear-gradient()前面，否则会被后者覆盖，而后者在旧 Safari 里又不生效 - 8 位 hex（如
#0000004D）旧 Safari 不认，仅 iOS 13+ 支持
安全的颜色写法和双写顺序
别碰 rgba()，改用最稳的 transparent 或命名色/6 位 hex。双写时顺序和结构必须严格：
background-image: -webkit-linear-gradient(left, #333, transparent),
linear-gradient(to right, #333, transparent);
注意：
- 前缀版本用
left，标准版本用to right（两者语义等价，但老引擎只吃前者） - 必须分开写
background-color和background-image，禁用background简写——它会清空background-image - 降级 fallback 要显式写：
background-color: #fff;，不能靠@supports，旧 Safari 根本不识别这个规则
伪元素承载渐变绕过色带和黑块
即使颜色写对了，浅色渐变（如 #f5f5f5 → #ffffff）在旧 Safari 仍可能出灰黑断层——这不是黑块，是 16-bit 色深导致的 banding（色带）。这时得换路径：
立即学习“前端免费学习笔记（深入）”；
- 主元素只设
position: relative和background: none - 用
::before伪元素承载渐变：content: ""+position: absolute+inset: 0 - 必须加
transform: translateZ(0)（iOS 必加），否则合成层不启用，色带照旧 - 渐变写在伪元素上，方向照常用
to bottom等，不用降级
transparent 在某些组合下，iOS 13 开始才稳定；而伪元素方案在 iOS 6–9 的微信 WebView 里又可能因 inset 不支持失效。实际项目中，得按目标用户设备分布，决定是否保留 -webkit-gradient(old syntax) 回退，或者直接放弃最低端机型。 
