最可靠纯CSS文字渐变方案是background-clip: text + color: transparent，但需加-webkit-前缀兼容Safari旧版及安卓WebView；兼容边界为Safari 15.4，此前版本及微信iOS、钉钉安卓X5内核必须保留前缀。
直接用 background-clip: text + color: transparent 是目前最可靠、语义最清晰的纯 CSS 文字渐变方案，但 Safari 旧版本和部分安卓 WebView 仍需加 -webkit- 前缀才能显示。
为什么必须写 -webkit-background-clip: text 和 -webkit-text-fill-color: transparent
Chrome、Edge、Firefox 新版已原生支持 background-clip: text，但 Safari 直到 iOS 15.4 才完全移除前缀依赖；而大量安卓系统 WebView（如微信内置浏览器、QQ 浏览器 X5 内核）至今只认 -webkit- 版本。漏掉前缀会导致文字直接变成全黑或全白，不是“没渐变”，而是“根本没生效”。
- 不加
-webkit-background-clip: text：Safari 14 及更早版本文字背景不裁切，渐变铺满整个容器 - 不加
-webkit-text-fill-color: transparent：WebKit 内核下color: transparent可能被忽略，文字以默认色（通常是黑色）覆盖渐变 - 二者缺一不可，且必须同时存在——顺序无关，但缺失任一都会在特定环境失效
background-clip: text 的兼容性边界在哪
这个属性真正落地的分水岭是 Safari 15.4（2022 年 3 月发布）。如果你的项目需兼容 iOS 15.0–15.3 或 Android 10–12 的系统 WebView，就必须保留前缀。而像 Chrome 110+、Firefox 109+ 这类新内核，即使去掉前缀也完全正常。
- 可安全去前缀的场景：
target: "chrome >= 110, firefox >= 109, safari >= 15.4"（配合 Browserslist） - 不能去前缀的典型环境：微信 iOS 客户端（多数仍为 WKWebView 15.0–15.2）、钉钉安卓端 X5 内核（基于 Chromium 75–86）
- 注意：
background-clip: text在 Firefox 中从不支持border-box或padding-box，只认text，这点无需额外处理
渐变背景尺寸与动画联动的关键细节
如果后续要加滚动渐变或色相流动效果，background-size 必须显式设置，否则 background-position 动画会无效——因为默认 background-size 是 auto，无法平移。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
background-size: 200% 200%;（水平/垂直各拉伸 2 倍，留出动画空间） - 动画起点建议设为
background-position: 0% 50%;，避免首帧偏移突兀 - 不要用
background-size: 400% 400%配合@keyframes大范围位移，某些低端安卓设备会出现渲染撕裂 - 若用
hue-rotate()模拟流动，务必搭配will-change: background-position提升合成层，否则 iOS Safari 动画卡顿明显
别踩这些实际开发中高频出错的坑
很多渐变文字在本地预览好好的，上线后突然变黑或失色，问题往往不在 CSS 写法本身，而在上下文干扰。
-
font-smooth: antialiased或-webkit-font-smoothing: antialiased会削弱文字边缘，导致渐变过渡发虚，建议删掉或改用subpixel-antialiased - 父容器设置了
transform: translateZ(0)或will-change: transform，可能触发硬件加速层剥离，使background-clip: text失效 - 使用了 CSS-in-JS 库（如 Emotion、Styled-components）时，若未开启
css: { autoPrefix: true }，前缀不会自动注入 - 字体加载期间（
font-display: swap）文字先以系统字体渲染，此时渐变会错位——应确保渐变样式仅作用于已加载完成的字体类名上
真正难的不是写出第一行渐变代码，而是让那行代码在微信里不糊、在旧 iPad 上不黑、在低端安卓机上不闪——前缀、尺寸、渲染层、字体加载，每个环节都得实测，不能只看文档。
