background-clip: text 是首选方案，因其将渐变作为背景、文字轮廓作蒙版，逻辑清晰、维护成本低且兼容文本常规行为；需配合 -webkit-background-clip: text 和 color: transparent 才能在主流浏览器稳定显示。
直接用 background-clip: text 配合 linear-gradient 是目前最可靠、语义最清晰的方案，但必须加 -webkit-background-clip: text 和 color: transparent 才能在 Chrome/Safari/Firefox 中稳定显示；IE 完全不支持，别白费劲。
为什么 background-clip: text 是首选
它把渐变当背景，再用文字轮廓当“蒙版”裁剪出来，逻辑直白，维护成本低，且能响应字体缩放、换行、伪元素等常规文本行为。比 mask-image 或 SVG 更轻量，也比 canvas 更易集成进现有 CSS 工程流。
常见错误是漏写 -webkit-background-clip: text —— Safari 16.4 之前、所有 iOS Safari、旧版 Android WebView 都会直接 fallback 成纯色文字，毫无预警。
实操要点：
立即学习“前端免费学习笔记（深入）”；
-
background必须是渐变函数（linear-gradient/radial-gradient），不能是颜色值或图片 -
color: transparent不可省略，否则文字会盖住背景 - 若文字有描边或阴影，需额外设置
-webkit-text-fill-color: transparent，否则描边仍显色 - 避免在
display: inline元素上直接用，建议加display: inline-block或display: block确保渲染稳定
mask-image 方案适合什么场景
当你需要叠加多层渐变、做镂空过渡、或要兼容部分不支持 background-clip: text 的 Firefox 旧版本（如 78 以下）时，mask-image 是可行备选。但它依赖伪元素和定位，结构更重，且无法继承父级 font-smoothing 行为。
典型坑点：
-
mask-image: linear-gradient(...)在 Firefox 中需加-webkit-前缀才生效（尽管规范已无前缀） - mask 的透明区域会“吃掉”文字阴影（
text-shadow），想保留阴影得在外层再套一层容器 - 不能用
attr(data-content)动态读取内容时，若 HTML 文本含空格或换行，伪元素内容可能错位 - 不支持
background-blend-mode混合，想做双色叠加深度效果就得靠多层 mask
@keyframes 动画让渐变动起来
只改 background-position 就能让线性渐变“流动”，比操作 hue-rotate 更可控、性能更好。关键不是动画本身，而是 background-size 要设得足够大（比如 200% 200%），否则位移一到边界就跳变。
示例片段：
.animated-gradient {
background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #44b5b1);
background-size: 300% 300%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: slideGradient 4s ease-in-out infinite;
}
@keyframes slideGradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
注意：
- 动画必须作用于有
background的元素本身，不能只动伪元素 - 在高刷新率屏幕（120Hz+）下，
ease-in-out比linear更防晕，尤其对横向滚动 - 如果文字是响应式字号（如用
clamp()），确保background-size单位用百分比而非 px，否则缩放后动画节奏失真
哪些地方最容易被忽略
字体加载时机。自定义字体（WOFF2）未就绪时，浏览器先用后备字体渲染，等字体加载完成再重绘——这时渐变背景会“闪一下”或错位。解决办法只有两个：font-display: optional（放弃低优先级字体）或给容器预设 line-height + min-height 锁定布局空间。
还有就是深色模式适配。渐变色写死十六进制时，不会随 prefers-color-scheme 切换。如需自动响应，得用 color-mix(in srgb, ...) 或 CSS 变量 + @media (prefers-color-scheme: dark) 手动覆盖整个渐变声明。
