firefox 不支持 background-clip: text，截至 v128 仍未实现，@supports 检测返回 false；渐变文字变黑/消失是因 fallback 到默认 color，-webkit 前缀无效，color: transparent 单独使用无裁切效果。
Firefox 不支持 background-clip: text，这不是 Bug，是现状——它压根不解析该声明，也不报错、不警告，写了就等于没写。
为什么 Firefox 里渐变文字变黑/消失？
根本原因不是 CSS 写错了，而是 Firefox（截至 v128）从未实现 background-clip: text，连 @supports (background-clip: text) 都返回 false。你看到的纯色文字，是浏览器跳过该规则后 fallback 到默认 color 的结果。
-
-webkit-background-clip: text在 Firefox 中完全无效，加前缀也没用 -
color: transparent单独写不会让文字“透出背景”，因为没有裁切机制配合 -
background-image再炫酷，只要没被裁到文字轮廓上，就只是元素背后的图，和文字无关
Firefox 下唯一靠谱的降级方案
别指望靠 JS 动态补样式或 polyfill，Mozilla 明确表示无支持计划。务实做法是视觉一致的兜底：
- 用
background-image: url(gradient-fallback.png)替代渐变——适合标题等静态内容，加载快、渲染稳 - 写两行
color：先写降级色（如color: #333），再覆盖为color: transparent，确保旧浏览器至少能看见文字 - 对 SEO 或动态文本敏感场景，用 JS 检测：
getComputedStyle(el).backgroundClip === 'text'，false时注入 SVG<text></text>替换 DOM 节点
Chrome/Safari 里写对了，为什么 Firefox 还是不生效？
即使你把 WebKit 兼容写全了，Firefox 仍不认，但以下三点常被误认为“Firefox 问题”，其实是跨浏览器共性陷阱：
-
text-shadow会盖住裁切边缘，在 Retina 屏上尤其发虚——必须设为text-shadow: none - 任意父级或自身用了
transform、will-change、filter或opacity ，Safari 会直接关闭裁切渲染 -
background-image被更高优先级规则（比如内联style或@layer）设为none或透明色，computed styles 里最终值为空，渐变自然没了
最容易被忽略的，是以为“写全前缀+transparent 就万事大吉”——实际上，Firefox 的缺席意味着你得从设计阶段就接受：渐变文字不是“可选增强”，而是“需明确分路径实现”的功能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
