firefox不支持-webkit-text-fill-color，唯一兼容方案是background-clip:text+color:transparent+显式渐变背景，需同时写-webkit-background-clip:text和background-clip:text且前者在前。
Firefox根本不认-webkit-text-fill-color，别白费劲了
这个属性在 Firefox 里不是“兼容性差”，是压根不解析——连 warning 都不报，直接跳过整条声明。你写 -webkit-text-fill-color: transparent 或加 !important、换 -moz- 前缀，全没用。Autoprefixer 也不会处理它，因为 W3C 标准里根本没这玩意儿。真实现象是：Chrome 里渐变好好的，切到 Firefox 就变纯黑/纯灰/或干脆看不见文字。
真正能跑通的写法：background-clip: text + color: transparent + 渐变背景
这是目前唯一被主流引擎（Chrome/Safari/Edge/Firefox ≥120）支持的路径，但必须严格满足以下条件：
-
background-image必须显式声明为渐变（如linear-gradient(45deg, #ff6b6b, #4ecdc4)），不能用background简写混入background-color，否则渐变会被覆盖 -
color: transparent不可省略，且必须写成transparent（不是rgba(0,0,0,0)）；WebKit 只认这个字面值来触发镂空逻辑 -
-webkit-background-clip: text和background-clip: text要同时写，且前缀版必须放在前面，否则 Safari ≤16.4 和旧版 Chrome 会失效 - 元素需有明确
display（如inline-block），块级元素若未设宽高可能裁剪异常
Firefox
Firefox 115 ESR（企业长期支持版）至今仍占不小份额，而 background-clip: text 在 120 版才原生支持。此时 CSS 方案已彻底失效：
-
-moz-background-clip: text从未被实现，写了等于白写 -
color: #333这类降级色看似保险，但若父级样式重置了color，又没在当前选择器里显式写死，文字可能直接不可见 - 用
background: url(gradient-fallback.png)是最稳的视觉兜底，尤其适合标题类静态内容 - 对动态文本或 SEO 敏感场景，建议 JS 检测
getComputedStyle(el).backgroundClip === 'text'，返回false时自动注入 SVG<text></text>替换逻辑
最容易被忽略的三个细节
即使代码看起来完全正确，这些点仍会让渐变突然消失：
-
text-shadow会盖住裁切边缘，在 Retina 屏上尤其明显发虚，必须禁用 - 任意父级或自身用了
transform、will-change、filter或opacity，Safari 会直接关闭background-clip: text渲染 -
background-image若被更高优先级规则（比如某层@layer或内联 style）设为none或透明色，渐变就没了，得查 computed styles 确认最终值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
