渐变文字需同时满足三条件：background-image为渐变、-webkit-background-clip:text（及标准background-clip:text）、color:transparent；缺一不可，否则文字不显示或失效。
直接用 background-clip: text 配合 linear-gradient 可以实现渐变文字，但必须同时设置 -webkit-background-clip: text 和 color: transparent，否则在大多数浏览器里根本不会显示。
为什么文字没变色？——关键三步缺一不可
渐变文本不是靠 color 或 background-color 实现的，而是把背景图“裁剪”进文字轮廓。常见失效原因就是漏掉以下任一条件：
-
background-image必须是linear-gradient(...)（或其他可绘制的背景，如url()） -
-webkit-background-clip: text必须显式声明（Chrome/Safari/Firefox 123+ 支持标准background-clip: text，但旧版 Firefox 和 Safari 仍依赖前缀） -
color: transparent不可省略——否则文字会用默认颜色盖住背景 - 元素需是行内级（如
）或显式设display: inline-block；block元素默认也行，但若内部有换行或 padding，裁剪区域可能异常
兼容性写法：前缀 + 标准属性 + 回退色
生产环境建议按顺序写全，确保老浏览器至少显示纯色文字：
.gradient-text {
background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
/* 回退：不支持 background-clip:text 的浏览器显示此色 */
color: #333;
}注意：color: #333 要放在 color: transparent 后面，利用 CSS 层叠覆盖；否则透明色会生效，而回退色被忽略。
立即学习“前端免费学习笔记（深入）”；
常见踩坑点：渐变不动、文字消失、边缘发虚
这些现象基本都和渲染细节有关：
-
渐变“卡住”不动：给元素加了
transform（如scale(1.001)）或will-change: transform，可能触发硬件加速，导致背景裁剪失效；临时解决可加backface-visibility: hidden -
文字完全看不见：检查是否误写了
background-clip: border-box或漏了transparent；也可能是父容器有overflow: hidden且子元素未设宽高，裁剪区域为 0 -
边缘模糊/发灰：部分 Chrome 版本对
text裁剪使用亚像素渲染，加-webkit-font-smoothing: antialiased可缓解，但可能让字体变细；更稳妥的是避免小字号（≤14px）下使用该效果 -
伪元素不生效：
::before/::after默认无法应用background-clip: text，因为它们没有文本内容；如需装饰性渐变字，得用真实元素包裹
真正麻烦的不是写法，而是当设计要求在深色背景上做浅色渐变字、还要适配暗色模式时，background-clip 本身不感知系统主题——你得靠 JS 监听 prefers-color-scheme 手动切 class，或者用 CSS 自定义属性配合媒体查询动态改 linear-gradient 的色值。
