background-clip: text 必须配合 color: transparent、display: inline-block/block 且有实际渐变背景才生效；iOS 存在渲染 bug 需加 -webkit-transform: translateZ(0)；老安卓需用 SVG 替代。
background-clip: text 不生效？检查这三点
绝大多数时候不是写法错，而是漏了关键前提：background-clip: text 必须配合 color: transparent 才能显出渐变；否则文字还是默认颜色盖住了背景。另外，它只对块级或行内块元素可靠，<span> 默认是纯行内元素，得加 display: inline-block 或 display: block。
-
color必须设为transparent，不能是rgba(0,0,0,0)或hsla(...,0)—— 部分 iOS Safari 会忽略后者 - 必须有实际背景（
background-image或background: linear-gradient(...)），纯background-color不触发裁剪效果 - 旧版 Android WebView 和 iOS 14.5 之前需加
-webkit-background-clip: text，且仅支持linear-gradient，不支持radial-gradient或图片背景
移动端 iOS Safari 渐变文字闪退/变黑？这是渲染 bug
iOS 15–16 的某些版本（尤其是 15.4–16.2）在 background-clip: text + font-weight 组合下会出现文字瞬间变黑或消失，本质是 WebKit 渲染管线对透明文字重绘失败。这不是 CSS 写错了，是浏览器层缺陷。
- 临时绕过：给文字容器加
-webkit-transform: translateZ(0)或will-change: transform，强制启用 GPU 层 - 更稳方案：避免在
<span>上直接用，改用<div>+display: inline-block，并确保父容器无overflow: hidden（它会截断裁剪区域） - 别依赖
text-shadow模拟渐变——移动端性能差，且和background-clip叠加后行为不可控
想兼容老安卓？别硬扛，换 SVG 文字
Android 4.4–6.0 的 WebView 根本不支持 background-clip: text，连 -webkit- 前缀都无效。这时候强行加降级样式（比如 fallback color）意义不大，因为用户看到的就是纯色文字，毫无渐变感。
- 真兼容方案：用
<svg>+<text>+<linearGradient>，SVG 文字渐变在所有安卓 WebView 中都稳定 - 注意 SVG
<text>的font-family必须和页面一致，且要显式设置font-size和dominant-baseline对齐基线 - 如果文字内容动态，得用 JS 注入 SVG，但别每次重绘都重建整个
<svg>，缓存<defs>里的<linearGradient>节点
性能警告：别在长列表里批量用 background-clip text
每个启用 background-clip: text 的元素都会触发额外的合成层和透明通道混合计算，iOS 上尤其吃 GPU。滚动时若几十个标题同时带渐变文字，帧率可能掉到 30fps 以下。
立即学习“前端免费学习笔记（深入）”；
- 只对视觉焦点区（如首屏标题、活动 Banner）启用，列表项统一用纯色+微弱阴影替代
- 避免和
transform: scale()或opacity动画同时作用在同一元素上——WebKit 会放弃优化，强制每帧重绘 - 用 Chrome DevTools 的 Rendering 面板勾选 “Paint flashing”，能直观看到哪些文字区域在持续重绘
最麻烦的不是怎么写对，而是怎么判断该不该用：如果设计稿里渐变只是轻微点缀，不如换成 background-image: url(data:image/svg+xml,...) 内联 SVG 作为伪文字背景——它没渲染风险，也不触发透明合成，就是得手动调位置。
