旧版 android webview 和 x5 内核中 linear-gradient 渲染黑块，根本原因是渐变声明失效后无 background-color 兜底，底层渲染默认填黑；需同时满足加 -webkit- 前缀、用 to right 等方向关键词、rgba() 显式声明 alpha 且设 background-color 兜底。
旧版 Android（尤其是 Android 5–8 的 WebView 和微信/X5 内核）上 linear-gradient 渲染成黑块，根本原因不是“不支持”，而是它偷偷 fallback 到了纯黑背景——因为渐变声明失效后，浏览器没颜色可画，就用默认黑色填充。
为什么旧安卓 WebView 显示黑块而不是透明或白底？
Android 5–7 系统 WebView（尤其 X5 内核）对 linear-gradient 的解析极脆弱：方向漏 to、颜色值少 alpha、逗号多空格、甚至路径里多了个换行，都会导致整个函数被丢弃。此时若没设 background-color，部分内核会直接填黑（不是 CSS 规范行为，是底层渲染兜底逻辑）。更隐蔽的是：即使你写了 background: #fff linear-gradient(...)，简写语法在 X5 中常把渐变吃掉，只留下 #fff——但若渐变语法错误，它连 fallback 都不触发，直接黑。
- 典型报错现场：
linear-gradient(90deg, red, blue)→ Android 6 WebView 当作无效值，黑块 - 安全写法必须带
-webkit-前缀 +to right关键词，不能用角度 - 黑块 ≠ 透明失效，而是“渐变未生效 + 无 background-color 兜底”双重失败
旧安卓兼容写法：前缀 + 方向关键词 + 颜色 alpha 显式声明
必须同时满足三项，缺一不可：
- 在
background-image中并列写两行：-webkit-linear-gradient(to right, rgba(255,0,0,0.8), rgba(0,0,255,0.8))和linear-gradient(to right, rgba(255,0,0,0.8), rgba(0,0,255,0.8)) - 方向只能用
to top/to right等，禁用90deg（X5 完全不认角度） - 所有颜色必须用
rgba()或 8 位 hex（如#ff000080），禁用transparent（X5 解析为黑灰过渡） - 务必单独设置
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));
}
微信/X5 内核额外雷区：空格敏感、多层背景错位、伪元素失效
微信内置浏览器（基于 X5）比原生 WebView 更挑：
- 前缀和标准写法之间**不能换行**，必须写在同一行，否则第二条被忽略 → 黑块
- 如果用了多层背景（比如
linear-gradient+url(bg.jpg)），X5 会错乱解析background-size，导致渐变拉伸成黑条 → 改用单层渐变 + 图片作为父容器背景 - 伪元素（
::before）上设渐变，在 X5 中常不触发渲染 → 改用真实子元素 +position: absolute - 避免在
transition中动画background-image，X5 不支持，会卡死或闪黑
真机测试必须覆盖的最小安卓组合
别信“Android 7+ 就 OK”的说法。以下四组必须实测：
- Android 6.0 + 微信 7.0.20（X5 6.12 内核）→ 最经典黑块发生地
- Android 7.1 + QQ 浏览器 11.2（X5 6.14）→ 对
rgba()位置敏感，rgba(0,0,0,0)可能崩 - Android 8.1 + 系统 Chrome 65（非 WebView）→ 虽支持角度，但若混用
to bottom和180deg会冲突 - 华为 EMUI 9.1 + 自带浏览器（Trident 内核）→ 只认
-webkit-，且要求颜色停靠点带百分比（red 0%, blue 100%）
真正难的不是写出兼容代码，而是在 X5 内核里让 rgba() 的 alpha 值稳定生效——它有时会把 0.1 当作 0 渲染，有时又把 0.05 当作全黑。上线前，alpha 值务必从 0.2 起步实测，低于这个阈值基本不可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
