必须同时设置 background-image、-webkit-background-clip、background-clip 和 color: transparent 四个属性，且 WebKit 内核下还需 -webkit-text-fill-color: transparent 才能正确显示文字渐变效果。
直接用 background-clip: text 配合 linear-gradient() 就能实现，但漏掉任意一个关键属性，文字就显示为纯黑或纯白——不是代码没生效，而是浏览器根本没按你预期渲染。
必须同时写的四个 CSS 属性
只写 background-image: linear-gradient() 和 background-clip: text 是不够的。以下四者缺一不可：
-
background-image: linear-gradient()：定义渐变（方向+颜色节点） -
-webkit-background-clip: text：Safari 和旧版 Chrome 必须靠它识别文本剪裁 -
background-clip: text：Firefox 125+、Chrome 128+ 等新版支持标准语法，但不能替代前缀 -
color: transparent：让文字本体“挖空”，否则渐变背景透不出来
常见错误现象：文字仍是黑色/灰色——大概率漏了 color: transparent；文字变成整块色块无渐变——大概率只写了标准 background-clip 没加 -webkit- 前缀。
为什么还要加 -webkit-text-fill-color: transparent
在 Safari 16.4+、iOS 17+、Chrome 122+ 中，仅用 color: transparent 会导致文字边缘残留抗锯齿灰边，尤其在高 DPI 屏幕上明显发虚。这时必须额外声明：
立即学习“前端免费学习笔记（深入）”；
-webkit-text-fill-color: transparent;
这不是可选补丁，是 WebKit 内核下强制清除字体填充层的刚需。两者共存才真正“清空”文字：
-
color: transparent是通用 fallback -
-webkit-text-fill-color: transparent是 WebKit 专属穿透指令
漏掉后者，用户在 iPhone 上看到的可能是带毛边的半透明残影，而非干净渐变。
linear-gradient() 的写法容错极低
拼接渐变字符串时，浏览器对语法异常敏感，尤其 iOS Safari 和 Android WebView：
- 方向参数不能省略：写
to right或90deg，不能留空或传"" - 颜色之间必须有且仅有一个空格：
linear-gradient(to right, #f00, #0f0)✅；linear-gradient(to right,#f00,#0f0)❌（逗号后无空格） - 颜色格式不自动转换：用户输入
rgba(255,0,0,0.8)，就不能转成#ff0000，否则透明度丢失导致视觉断层
动态生成代码时，若用 JS 拼接，务必校验空格、方向、括号闭合；手写也建议复制完整模板再改颜色值，避免肉眼误判。
@supports 降级必须覆盖真实场景
IE ≤ 11、部分国产 WebView（如旧版 TBS）、企业内网定制浏览器根本不支持 background-clip: text。仅靠加前缀无法兜底，必须用 @supports 显式检测：
@supports (background-clip: text) {
.gradient-text {
background-image: linear-gradient(to right, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
}
@supports not (background-clip: text) {
.gradient-text {
color: #3b82f6;
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
}
别用 filter: drop-shadow() 替代——它在 Retina 屏上模糊、色阶失真，且无法模拟渐变过渡。真正要兼容老环境，单色 + 轻量阴影才是稳定 fallback。
最易被忽略的点：所有渐变文字元素都应设 display: inline-block 或 display: block。默认 display: inline 在某些布局中会触发渲染异常，导致剪裁失效或高度塌陷——这点没有报错，但效果就是不出现。
