firefox 直接忽略 -webkit-text-fill-color 是因该属性未被 w3c 标准化，mozilla 拒绝实现，解析器直接跳过；同时 background-clip: text 直至 v120 才支持，旧版需用 svg 替代。
Firefox 为什么直接忽略 -webkit-text-fill-color
这不是兼容性问题，而是标准缺失导致的“不识别”。-webkit-text-fill-color 是 WebKit/Blink 内核（Chrome、Safari、新版 Edge）私有属性，W3C 从未将其纳入草案，Mozilla 明确拒绝实现。浏览器解析器遇到该声明时，既不报错也不警告，直接跳过整行——就像它根本不存在。
常见错误现象包括：
- Chrome 中渐变文字正常，Firefox 里变成纯黑或继承色（尤其深色背景上不可读）
- 检查
computed styles面板，-webkit-text-fill-color根本不出现在列表中 - Autoprefixer 不会为它加任何前缀，因为没有对应的标准属性可映射
color 不是自动 fallback，必须显式写
-webkit-text-fill-color 和 color 之间没有层叠关系：前者不会“覆盖”后者，也不会在失效时退回到后者。如果只写 -webkit-text-fill-color: transparent，Firefox 就按 UA 默认色（通常是 color: black）渲染，结果可能是文字全黑或全白，完全不可控。
实操要点：
-
color必须在同一选择器里显式声明，不能依赖继承或父级设置 - 若目标是镂空效果，
color应设为可读降级色（如color: #333），而非transparent - 顺序无关紧要：
color放前面或后面都行，但缺一不可
background-clip: text 在 Firefox 120 之前等于没写
Firefox 直到 v120（2024 年 10 月发布）才原生支持 background-clip: text。这意味着当前大量用户（尤其是企业环境用 ESR 版本）仍在使用 115.x 或更早版本，该属性完全无效。
关键限制：
-
-moz-background-clip: text从未被实现，写了也白写 - 即使写了
background-clip: text，若没配color: transparent，文字仍显示为默认色（背景被遮住） -
background简写会重置background-clip，例如background: #fff linear-gradient(...)会让渐变消失
真正能落地的跨浏览器方案只有 SVG
当项目必须兼容旧版 Firefox 或需要 SEO/可访问性保障时，<svg><text></text></svg> 是唯一可靠路径。用 fill="url(#grad)" 实现渐变，所有现代浏览器（含 Firefox 60+）100% 支持。
动态场景下可 JS 检测：
- 执行
getComputedStyle(el).backgroundClip === 'text' - 返回
false时，自动注入 SVG 替换逻辑 - 避免用
<canvas></canvas>渲染——它破坏文本可选、可复制、无障碍访问能力
最易被忽略的细节：渐变文字效果不是靠单个属性实现的，而是 background-image + background-clip: text + color: transparent 三者缺一不可；而其中任意一环在非 WebKit 浏览器里都可能彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
