旧版Android WebView显示黑块是因为渐变声明失效后无background-color兜底，底层默认填黑；必须同时满足加-webkit-前缀、用to right等方向关键词、rgba()显式声明alpha、单独设置background-color兜底。
旧版 Android（尤其是 5–8 系统）WebView 和微信/X5 内核上，linear-gradient 显示黑块，不是“不支持”，而是渐变声明被静默丢弃后，又没 background-color 兜底，底层直接填黑——必须同时加前缀、改方向写法、显式设 alpha、单独写兜底色。
为什么旧安卓 WebView 渲染成黑块而不是透明或白底
Android 5–7 的 WebView（特别是 X5 内核）对 linear-gradient 解析极脆弱：漏 to、颜色缺 alpha、逗号后多空格、甚至换行，都会导致整个函数被当作无效值丢弃。此时若没声明 background-color，部分内核不会 fallback 到透明或默认白，而是用渲染层默认黑色填充。
更隐蔽的是：background: #fff linear-gradient(...) 这种简写在 X5 中常把渐变吃掉，只留 #fff；但一旦渐变语法出错，它连这个 fallback 都不触发，直接黑。
-
linear-gradient(90deg, red, blue)→ Android 6 WebView 当作无效值，黑块 -
background-image: linear-gradient(to right, red, blue)→ 缺-webkit-前缀，X5 忽略 -
background: linear-gradient(to right, #f00, #00f)→#f00没 alpha，X5 解析为黑灰过渡，最终仍可能黑
必须同时满足的四项兼容写法
少一项就可能黑。这不是“尽量加”，而是 X5 内核的硬性解析规则：
- 方向只能用
to top/to right等关键词，禁用90deg（X5 完全不认角度） - 所有颜色必须用
rgba()或 8 位 hex（如#ff000080），禁用transparent（X5 解析为黑灰过渡） -
background-image中并列写两行：-webkit-linear-gradient(...)和linear-gradient(...)，且必须在同一行，不能换行（否则第二条被忽略） - 务必单独写
background-color作为最终兜底，且放在background-image前面（顺序错，兜底失效）
示例：
div {
background-color: #f0f0f0;
background-image: -webkit-linear-gradient(to right, rgba(255,0,0,0.6), rgba(0,0,255,0.6)), linear-gradient(to right, rgba(255,0,0,0.6), rgba(0,0,255,0.6));
}
Bootstrap 场景下怎么安全接入响应式渐变
Bootstrap 的 bg-gradient-* 类在旧安卓上基本不可用——它不带前缀、用角度、颜色无 alpha、也没兜底色。你得绕过工具类，手动写媒体查询 + 兼容声明：
- 小屏基础态先写
background-color（比如bg-light），确保无渐变时有明确底色 - 在
@media (min-width: 768px)里，用background-image注入双前缀渐变，方向用to right，颜色全用rgba() - 别用
background简写，否则会清掉已有的background-color或纹理 - 如果项目用 Sass，可复用
$grid-breakpoints变量，避免硬编码768px
示例（仅 md+ 启用左→右渐变）：
@media (min-width: 768px) {
.hero-section {
background-color: transparent;
background-image: -webkit-linear-gradient(to right, rgba(13,110,237,0.8), rgba(111,66,193,0.8)),
linear-gradient(to right, rgba(13,110,237,0.8), rgba(111,66,193,0.8));
}
}
微信/X5 内核额外雷区
微信内置浏览器比原生 WebView 更挑，很多“看起来能跑”的写法在微信里直接黑：
-
-webkit-和标准写法之间**不能换行**，必须写在同一行，否则第二条被忽略 → 黑块 - 多层背景（比如
background-image: url(), linear-gradient()）容易错位或只渲染第一层 - 伪元素（
::before/::after）上的渐变在 X5 中常失效，别指望靠它做遮罩或装饰 - 空格敏感：逗号后多个空格、
to right中间多空格，都可能导致解析失败
最稳的做法是：把兼容性逻辑收进单个 class，用 !important 确保不被覆盖，并在真机（尤其红米/华为旧机型）上实测 —— 模拟器和 Chrome DevTools 的 “Device Mode” 基本不准。
