旧版 safari 中 linear-gradient 出现黑块，主因是 rgba() 透明色不被支持而被渲染为黑色，应改用 transparent 或 8 位 hex 并配降级，双写 -webkit-linear-gradient 与标准语法、分开声明 background 属性、避免简写清空渐变。
旧版 Safari 里 linear-gradient 出现黑块，基本是 rgba() 没兜住
旧版 Safari（iOS 12 及更早、部分微信 WebView）对 rgba() 在 linear-gradient() 中的支持极弱。它不会降级或忽略，而是直接把无法解析的透明色渲染为纯黑——这不是写法错误，是颜色格式被引擎拒收。
- 别用
rgba(0, 0, 0, 0.3)或hsla(0, 0%, 0%, 0.3)：这些在 iOS 12 Safari 中大概率触发黑块 - 改用
transparent：它被所有支持linear-gradient的浏览器无条件支持 - 若必须控制灰度深浅，统一换 8 位 hex：
#0000004D（等价于rgba(0,0,0,0.3)），但注意 iOS 12 仍不支持，需配降级
-webkit-linear-gradient 加了还是黑？可能是前缀和颜色格式冲突
加 -webkit-linear-gradient() 是必要动作，但它不是万能解药。老 WebKit 引擎对颜色格式极其挑剔，rgba() 和角度写法都会导致整条声明失效，回退为黑背景。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
-webkit-linear-gradient()只接受最简颜色：#000、red、transparent，拒绝rgba()和 8 位 hex - 方向只能用关键词：
left、right、top、bottom；不能带to前缀，也不能写90deg - 双写必须顺序固定：
background-image: -webkit-linear-gradient(to right, #000, transparent), linear-gradient(to right, #000, transparent);—— 前缀写后面会被覆盖，结果还是黑
background 简写一用就黑，是因为渐变被清空了
background 简写会重置所有子属性，包括 background-image。你没显式写出渐变层，它就被干掉了，只剩默认背景色（常为黑色或透明）。
- 安全做法永远是分开写：
background-color: #fff;+background-image: linear-gradient(...); - 千万别写成
background: #fff linear-gradient(...);，哪怕只漏一个background-image声明，渐变就没了 - 如果用了伪元素承载渐变（如修复色带问题），主元素的
background必须留空或明确设为none，否则会遮盖伪元素
Safari 渲染浅色渐变出现灰黑断层，其实是色带（banding）不是黑块
这不是颜色值错误，而是 Safari GPU 渲染路径用 16-bit 色深处理低对比度渐变（如 #f5f5f5 → #ffffff），过渡被硬截断成离散阶跃，最暗几阶视觉上显出灰黑“阴影”。
- 直接加
opacity或filter无效，得绕过原生渐变路径 - 用伪元素 +
transform: translateZ(0)强制启用高精度合成层：伪元素设content: ""、position: absolute、inset: 0，再加translateZ(0)（iOS 必加） - 渐变写在伪元素上，方向关键词照常使用（
to bottom等），无需降级语法
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
