首选方案是 background-clip: text，因其原理清晰、代码最短、支持动画；需同时声明 -webkit-background-clip: text 和 background-clip: text 并设 color: transparent，Firefox 不支持须用 @supports 降级。
直接用 background-clip: text 配合 color: transparent 就能实现，但必须加 -webkit-background-clip: text 才能在 Chrome/Safari 正常显示；Firefox 目前不支持该特性，别指望纯 CSS 方案全浏览器兼容。
为什么 background-clip: text 是首选方案？
它原理清晰：把渐变背景“裁剪”到文字轮廓内，再让文字本身透明，视觉上就是文字在渐变。相比 -webkit-mask-image 或 SVG，它代码最短、维护成本最低，且支持动画（比如移动背景位置做流动效果）。
常见错误现象：background-image 写了但没效果 → 忘了 color: transparent 或漏掉 -webkit- 前缀；文字变成黑/白/默认色 → background-clip: text 被忽略，浏览器当普通背景处理。
-
background-image必须是linear-gradient()或radial-gradient()，不能是图片路径 - 必须同时声明
-webkit-background-clip: text和background-clip: text -
color: transparent不能用-webkit-text-fill-color: transparent替代（后者在部分旧 Safari 下有渲染 bug） - 元素需是块级或设置
display: inline-block，否则background-clip: text可能失效
Firefox 不支持怎么办？
目前（2026 年）Firefox 仍不支持 background-clip: text，也没有明确的启用时间表。别硬套 polyfill，它不是 JS 能补的 CSS 渲染机制。
立即学习“前端免费学习笔记（深入）”；
务实做法是降级：用 @supports 检测，给 Firefox 提供 solid 颜色 fallback：
.title {
color: #333; /* 默认色，所有浏览器都生效 */
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
.title {
background-image: linear-gradient(90deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
}注意：@supports 里要同时写带前缀和不带前缀的条件，因为 Safari 已支持标准语法，但部分旧版本只认 -webkit-。
想加动画？别动 color，动 background-position
直接对 color 做 keyframe 动画只会得到两个纯色来回切，不是渐变流动效果。真要动起来，得让渐变背景“滑过”文字：
- 必须加
background-size: 200% 100%（水平方向铺开两倍宽） - 用
background-position从0% 0%动到-100% 0% - 只对
background-position加 transition 或 animation，不要碰color - 动画属性必须带
-webkit-前缀，否则 Chrome 低版本不触发
示例片段：
.title-animated {
background-image: linear-gradient(90deg, #ff6b6b, #4ecdc4, #44b5b1);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-size: 200% 100%;
-webkit-animation: slideGradient 4s infinite linear;
}
@-webkit-keyframes slideGradient {
0% { background-position: 0% 0%; }
100% { background-position: -100% 0%; }
}真正容易被忽略的是：这个效果依赖文字渲染层与背景层的合成顺序，一旦父容器设了 transform、filter 或 will-change，某些 Chrome 版本会出现闪烁或裁剪错位——遇到就临时关掉这些属性，别硬扛。
