渐变文字需同时满足三条件：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 层叠覆盖；否则透明色会生效，而回退色被忽略。
