Firefox完全不支持-webkit-text-fill-color，因其是WebKit/Blink专属属性，Mozilla从未实现且拒绝标准化；它被解析器直接忽略，不报错、不警告；需用background-clip:text（Firefox≥120）配合color:transparent降级，或改用SVG实现跨浏览器兼容。
Firefox 和 Edge 完全不支持 -webkit-text-fill-color，写上去等于没写——它不是“兼容性差”，是根本被解析器忽略。
为什么 -webkit-text-fill-color 在 Firefox 里完全无效
这个属性是 WebKit/Blink 内核专属（Chrome、Safari、Edge 新版），Mozilla 从未实现过，也拒绝加入标准草案。加 -moz- 前缀？没用。加 !important？照样无视。浏览器连 warning 都不报，直接跳过整条声明。
常见错误现象：
— 开发者在 Chrome 看着好好的渐变文字，切到 Firefox 发现变成纯黑/纯灰/或干脆透明不见
— 检查 computed styles 时发现 -webkit-text-fill-color 根本没出现在列表里
— 试图用 Autoprefixer 自动补前缀，结果它压根不处理这个属性（因为无标准对应值）
background-clip: text 是唯一可行的替代路径，但有硬性版本门槛
Firefox 直到 v120 才原生支持 background-clip: text（2024 年 10 月发布）。这意味着：
- Firefox ESR（企业长期支持版）用户大概率还在用 115.x 或更早，
background-clip: text不生效 -
-moz-background-clip: text从未被实现，Autoprefixer 也不会生成它——写了也是白写 - 即使你写了
background-clip: text，若没配color: transparent，文字仍显示为默认色（背景被遮住） - Safari ≤16.4 和旧版 Chrome 必须依赖
-webkit-background-clip: text，且要放在标准属性前面
真正能落地的降级方案：从 CSS 到 SVG
当项目必须兼容 Firefox
- 用
替代 HTML 文本，通过fill="url(#grad)"实现渐变，100% 兼容所有现代浏览器（含旧 Firefox） - 对动态文本或 SEO 敏感内容，可 JS 检测
getComputedStyle(el).backgroundClip === 'text'，返回false时自动注入 SVG 替换逻辑 - 避免 canvas 渲染——它无法选中、复制、无障碍访问，仅作最后兜底
- 别指望 “CSS fallback color” 解决问题：
color: #333只在background-clip失效时起作用，但旧 Firefox 连这个兜底都可能被更高优先级规则覆盖
最容易被忽略的细节：background-image 不能被简写覆盖
哪怕你写了正确的 background-clip: text + color: transparent，以下写法仍会让渐变消失：
-
background: #fff linear-gradient(45deg, red, blue);——background-color会覆盖掉渐变层 -
background: linear-gradient(...);—— 看似没问题，但若父元素或重置样式里有background-color，层叠后依然失效 - 正确写法必须显式声明：
background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4);，且确保没有其他background简写覆盖它 - 漏掉
background-image，或设为none/transparent，background-clip: text就彻底没东西可裁
渐变文字不是“加个属性就行”的功能，而是渲染管线级别的特性切换。Firefox 120+ 是分水岭，跨不过就得换技术方案——别在 -webkit-text-fill-color 上浪费调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
