Firefox截至128版不支持background-clip: text，需用color: transparent+background-image降级；Safari旧版需加-webkit-text-fill-color: transparent，且避免transform干扰裁切。
Firefox根本不支持background-clip: text，不是bug是现状
截至Firefox 128稳定版（2026年4月），Mozilla官方没有实现background-clip: text的计划，也不接受polyfill或前缀补丁。它不报错、不警告，只是完全忽略该声明——所以你看到文字还是纯色，不是写错了，是浏览器压根没执行。
必须用color: transparent，别用rgba(0,0,0,0)
即使在Chrome/Safari里，漏掉color: transparent也会让渐变“透不出来”。注意：rgba(0,0,0,0)≠transparent，前者是半透明黑色，后者才是真透明；WebKit只认transparent来触发文字镂空逻辑。
-
-webkit-background-clip: text和background-clip: text要同时写，且前缀版必须放在前面 - 必须配
background-image（如linear-gradient()），background-color无效 - 避免
text-shadow，它会在裁切边缘叠加灰边，尤其在Retina屏上明显发虚
Firefox降级方案：用background-image兜底最稳
不要试图用JS检测+动态插入样式，Firefox对background-clip: text的支持不是“未启用”，而是“未定义”。稳妥做法是直接提供视觉一致的降级：
- 对Firefox用户，用
background-image: linear-gradient()+background-clip: padding-box模拟类似质感（虽不镂空，但渐变可见） - 或改用
background: url(gradient-fallback.png)，确保设计稿里导出一张高DPR适配的渐变图 - 若需语义化文字内容，可用
包裹文字，外层容器设背景图，再用position: relative叠上去（牺牲一点维护性，换兼容性）
旧版Safari还要加-webkit-text-fill-color: transparent
iOS 12.5.7或Safari 9–13这类老内核，光写color: transparent不够，必须额外声明-webkit-text-fill-color: transparent，否则文字会fallback成黑色块。顺序也很关键：-webkit-text-fill-color得在color之后，否则可能被覆盖。
真正容易被忽略的是：这些属性组合一旦遇上transform或will-change，整个裁切效果在部分Safari版本里会直接消失——不是渐变没了，是文字彻底不渲染。遇到这种问题，先删掉transform类，再逐个排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
