旧版android（5–8）webview及微信x5内核css渐变出现色阶断裂，主因是渲染引擎低精度采样导致“跳帧”，须用伪元素+translatez(0)/will-change强制gpu合成层，并严格采用to right方向、rgba/8位hex颜色、双写-webkit与标准渐变、单独前置background-color兜底，且色标需错开避免硬切。
低版本 Android（尤其是 5–8 系统）WebView 和微信 X5 内核上，CSS 渐变出现生硬过渡或色阶断裂，并非颜色写错了，而是渲染引擎对渐变的解析和采样能力受限——它把本该平滑过渡的颜色区间“跳帧”处理，最终呈现为几档明显的灰阶带。解决核心不是调参数，而是绕过它的低精度渲染路径。
用伪元素承载渐变并强制合成层
直接在目标元素上写 background: linear-gradient() 是色阶断裂最常见源头。必须把渐变移到 ::before 伪元素中，并让它进入独立 GPU 合成层：
- 主元素只设
position: relative和background: transparent，不写任何渐变 - 伪元素加
content: ""、position: absolute、inset: 0（不用 top/left/width/height） - 必须同时加
transform: translateZ(0)和will-change: transform，缺一不可
颜色与方向写法必须严格兼容 X5 内核
X5 对语法错误零容忍，漏一个字符就整条丢弃，导致兜底失效后直接黑块或断层：
- 方向只能用
to right、to bottom等关键词，禁用90deg（X5 完全不识别角度） - 所有颜色必须用
rgba(r,g,b,a)或 8 位 hex（如#ff000080），禁用transparent（X5 解析为黑灰过渡） -
background-image中双写两行：-webkit-linear-gradient(to right, ...)和linear-gradient(to right, ...)，且必须在同一行，不能换行
务必单独设置 background-color 兜底
这是最容易被忽略却最关键的一环：一旦渐变声明因语法问题被丢弃，没有 background-color 就会触发底层默认填黑，视觉上就是“突然断裂+发黑”：
- 兜底色必须单独写，不能放在
background简写里（background: #fff linear-gradient(...)在 X5 中常吃掉渐变，但语法错时连 #fff 都不保留） -
background-color必须写在background-image前面，顺序错则兜底失效 - 选一个与渐变主色调协调的浅灰或白底（如
#f8f8f8），避免突兀跳变
避免硬切色标，微调过渡区间
两个颜色在完全相同的位置硬切（如 #ff758c 50%, #ff7eb3 50%），会让浏览器失去插值空间，直接采样导致断层：
- 把停靠点错开：例如
#ff758c 48%, #ff7eb3 52%，留出 4% 的缓冲过渡区 - 渐变色标建议不少于 3 个，尤其在明度接近的浅色之间（如
#f5f5f5 0%, #f0f0f0 50%, #ffffff 100%） - 避免使用
hsl()或oklch()等现代函数，低版本内核无法解析，易退化为黑灰
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
