background-clip:text不生效需检查三件事：一是必须设置color:transparent，否则文字颜色覆盖背景；二是添加-webkit-前缀，Firefox不支持；三是避免内联元素裁剪异常，建议用inline-block或block。
background-clip:text 不生效？先检查这三件事
最常见的情况是：写了 background-image: linear-gradient(...) 和 background-clip: text，但颜色没变，文字还是黑的。根本原因不是写法错，而是默认文字颜色盖住了背景。
- 必须显式设置
color: transparent，否则背景再好看也透不出来 -
background-clip: text是非标准属性，需要加-webkit-前缀才能在 Chrome/Safari/Edge 生效（Firefox 目前不支持） - 元素不能是内联元素（比如
span默认行为没问题，但若被设了display: inline且没设宽高，可能裁剪异常；稳妥起见建议用display: inline-block或block）
渐变方向与文字排版对齐难？用 background-size + background-position 微调
直接写 linear-gradient(to right, red, blue) 看起来像从左到右“扫”过文字，但实际渐变是作用在整个元素背景盒上的——如果文字很长或换行，效果会断开或错位。
- 给容器加
background-size: 100% 100%只是拉伸背景，不解决对齐问题 - 真正可控的方式是用
background-size: 200% 200%配合background-position: -100% 0，再结合transition做 hover 动画时更顺滑 - 单行标题推荐用
background-size: 100% 2px+background-position: 0 100%模拟“下划线渐变”，比全文字渐变更稳
Firefox 下完全不显示？别硬扛，准备降级方案
background-clip: text 在 Firefox 中至今无原生支持（截至 v128），连 -moz- 前缀都不认。强行用 JS 插件或 SVG 替换，反而增加首屏负担和维护成本。
- 用
@supports (background-clip: text)包裹渐变样式，里面写降级色：color: #333 - 不要依赖 JS 检测 UA 来开关样式——UA 字符串易伪造，且现代浏览器更新快，检测逻辑很快过时
- 如果设计稿强要求渐变，考虑用
<svg></svg>+<text></text>+<lineargradient></lineargradient>内联渲染，但注意 SEO 和可访问性（需加aria-hidden="true"并配真实文本）
性能隐患：动画中频繁改 background-position 会触发重绘
很多人喜欢做“文字渐变滚动”效果，hover 时让 background-position 从 0% 0 动到 100% 0。看似简单，实则在低端设备上容易掉帧。
立即学习“前端免费学习笔记（深入）”；
- 这个动画无法被 GPU 加速，因为
background-position属于非合成属性 - 替代方案：用
transform: translateX()移动一个带渐变背景的伪元素（::before），把它盖在文字上，文字本身保持静止 - 务必加
will-change: transform到伪元素，但只在 hover 时动态加，避免常驻导致内存占用上升
