background-clip: text 不起作用主因是缺少 -webkit-background-clip: text 前缀且未设 color: transparent；仅 background-image（如 linear-gradient）生效，非内联元素需 display: inline/inline-block；Firefox 不支持，须用 @supports 降级。
background-clip: text 为什么不起作用
直接写 background-clip: text 没效果，大概率是因为没加 -webkit-background-clip: text —— 这个属性至今仍需 WebKit 前缀才能生效，Chrome、Edge、Safari 都得靠它驱动。
更关键的是：必须同时设置 color: transparent，否则文字颜色会盖住背景渐变。CSS 的文字渲染逻辑里，color 是最上层的“颜料”，不透明就看不到底下 background 的任何变化。
- 漏掉
-webkit-前缀 → 渐变完全不显示 - 忘了
color: transparent→ 只看到纯色文字，背景被遮住 - 用在非内联元素（如
div）且没设display: inline或inline-block→ 行框不参与文本渲染，text值无效
渐变背景必须用 background-image
background-color 无法触发 background-clip: text 的裁剪行为——只有 background-image（包括 linear-gradient()、radial-gradient()）才支持按文字轮廓裁剪。
常见错误是写成：background: linear-gradient(...) 却没意识到这其实是 background-image 的简写，但一旦和其他背景属性（比如 background-color）混用，层叠顺序可能意外覆盖掉渐变。
立即学习“前端免费学习笔记（深入）”；
- 推荐显式写
background-image: linear-gradient(...)，避免简写歧义 - 不要和
background-color同时设在同一元素上，除非你明确需要 fallback 色（此时要确保color: transparent仍生效） - 渐变方向建议用度数（如
to right或45deg），比关键词更可控
兼容性与降级处理怎么做
Firefox 目前仍不支持 background-clip: text（截至 v128），所以纯靠这个实现渐变文字 = Firefox 用户看到的是透明文字（即空白）。不能只依赖 CSS 特性检测，得有视觉 fallback。
最稳妥的降级是用 @supports 包裹渐变逻辑，并在外层保留一个 solid color：
h1 {
color: #333; /* Firefox 和旧浏览器看到这个 */
}
@supports (-webkit-background-clip: text) and (background-clip: text) {
h1 {
background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
}- 别用
feature: "background-clip text"这种无效语法，@supports只认声明对 - 如果项目需支持 IE，那这个方案完全不可用，得换 SVG
<text>或 Canvas 渲染 - 注意字体抗锯齿差异：部分系统下透明文字 + 渐变背景会导致边缘发虚，可加
-webkit-text-stroke: 0.5px transparent微调
伪元素方案能绕过兼容问题吗
可以，但代价是语义和维护成本上升。原理是用 ::before 绘制渐变背景层，再通过 z-index 和 position 把它“垫”在文字下方，最后用 mix-blend-mode 或遮罩模拟效果——实际并不真正裁剪文字，只是视觉近似。
这种做法在 Firefox 里能显示，但问题更隐蔽：
- 文字无法被选中（因为真实文字被遮在底层或设为
visibility: hidden） - 响应式缩放时，伪元素尺寸容易和字体大小脱节，导致渐变错位
- 屏幕阅读器可能读不到内容，若伪元素承载了文本内容，还涉及重复 ARIA 问题
- 不如原生
background-clip性能好，尤其滚动时重绘开销更高
真要兼容 Firefox 且要求语义正确，目前更现实的选择是服务端生成 SVG 图片，或接受纯色 fallback —— 渐变只是锦上添花，不是核心信息载体。
