纯CSS文字渐变需用background-clip: text裁剪背景渐变至文字轮廓，必配-webkit-background-clip: text和color: transparent；Firefox不支持，须用@supports降级；动画优先位移background-position并优化性能。
用 background-clip: text 实现文字渐变色
纯 CSS 实现文字渐变，核心不是给 color 设渐变，而是把背景渐变“裁剪”到文字轮廓里。必须配合 -webkit-background-clip: text 和 color: transparent，否则文字显示为实色或完全不可见。
常见错误：只写 background: linear-gradient(...) 却忘了加 -webkit-background-clip: text，结果渐变出现在整个块背景上，文字还是默认黑/白。
-
background-image必须是渐变（linear-gradient或radial-gradient） - 必须设置
-webkit-background-clip: text（目前仅 WebKit 内核原生支持，Firefox 需加background-clip: text+color: transparent，但兼容性仍弱） - 必须设
color: transparent，否则文字会盖住背景 - 推荐加上
-webkit-text-fill-color: transparent，防止某些旧版 Safari 下文字意外显色
渐变文字在 Firefox 中不显示？补个降级方案
Firefox 目前不支持 background-clip: text，直接写会导致文字变成透明且无渐变。不能指望它“将来支持就不管了”，实际项目里得有 fallback。
- 用
@supports (background-clip: text)包裹渐变样式，里面写渐变逻辑；外面写普通color值作为降级 - 或者用
::before伪元素 +position: absolute模拟（需确保文字内容可预测、无换行） - 更稳妥的做法：服务端或构建时判断 UA，对 Firefox 输出纯色文字，避免渲染异常
linear-gradient 的方向参数怎么选才不翻车
渐变方向写错，文字颜色会从“左红右蓝”变成“上红下蓝”，看起来像整行被压扁了。关键是理解角度单位和关键词的对应关系。
立即学习“前端免费学习笔记（深入）”；
-
to right=90deg（水平向右渐变，最常用） -
to bottom=180deg（垂直向下，适合竖排文字） - 别用
0deg默认值——它等价于to bottom，不是“从左到右” - 如果文字是 inline 元素（如
），确保父容器没设overflow: hidden，否则渐变边缘可能被截断
动画渐变文字要注意重绘性能
给渐变文字加 animation: gradientShift 3s ease-in-out infinite 很酷，但直接 animating background-position 在低端设备上容易掉帧。
- 优先 animating
background-position，而不是background-image本身（后者强制重绘） - 加
will-change: background-position可提示浏览器提前优化，但别滥用，尤其在大量文字节点上 - 移动端建议关闭动画：用
@media (prefers-reduced-motion: reduce)降级为静态渐变 - 注意：Safari 对
background-position动画的 subpixel 渲染不稳定，有时出现闪烁，可加transform: translateZ(0)强制 GPU 加速
@supports。 
