firefox不支持-webkit-text-fill-color，须用background-clip: text + color: transparent实现渐变文字，且仅firefox 120+原生支持；旧版需降级为svg或canvas。
Firefox不支持-webkit-text-fill-color怎么办
直接说结论：Firefox根本不认-webkit-text-fill-color，哪怕你加上-moz-前缀也没用——这个属性是WebKit/Blink专属，Mozilla从没实现过。想在Firefox里让文字显示渐变色，必须绕开-webkit-text-fill-color，改用background-clip: text配合color: transparent，但要注意：Firefox直到v120才原生支持background-clip: text，更早版本（包括长期被企业使用的ESR分支）依然不行。
background-clip: text在Firefox的兼容性分水岭
Firefox 120+ 支持无前缀的background-clip: text；119及更早版本即使加-moz-background-clip: text也无效（该前缀从未被实现）。所以真实可用的方案只有两种：
- 只支持 Firefox 120+：直接写
background-clip: text+color: transparent+ 渐变background-image - 需兼容旧版 Firefox：必须降级为SVG
<text></text>或 canvas 渲染，CSS方案失效 - 若项目已用Autoprefixer，它不会为
background-clip: text加-moz-前缀——因为根本没意义
实际能跑通的渐变文字CSS写法（含Firefox 120+）
以下代码在 Chrome、Edge、Safari 和 Firefox ≥120 中均生效，Firefox background-clip被忽略，color: transparent导致文字不可见，所以务必加color兜底）：
.gradient-text {
background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
/* 兜底色，Firefox <p>关键点：</p>
-
background-image必须存在，且不能是none或透明色，否则渐变不出现 -
color: transparent不能省略，否则background-clip: text无效果 -
-webkit-background-clip: text仍要保留，用于 Safari ≤16.4 和旧版 Chrome - 别给文字设
text-shadow，它会盖住渐变层
为什么不用-webkit-text-fill-color加降级？
因为-webkit-text-fill-color在 Firefox 里就是个死属性——解析器直接忽略，连报错都不会有。有人试过这样写：
.text {
-webkit-text-fill-color: transparent;
background: linear-gradient(...);
-webkit-background-clip: text;
}
结果是：Chrome/Safari 正常，Firefox 文字变成默认黑色（因-webkit-text-fill-color被无视，color未设，回退到继承值）。更糟的是，这种写法会让开发者误以为“加了前缀就兼容”，实际完全骗不过Firefox。真正可靠的路径只有一条：接受background-clip: text的版本断点，明确标注支持范围，或者把渐变文字当作增强功能而非必需功能来设计。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
