Firefox不支持background-clip:text，必须同时满足color:transparent、display:inline-block/inline-flex及background-image（非纯色）三前提才生效。
直接用 background-clip: text 能做出真镂空，但 Firefox 不支持，且必须配 color: transparent 和 display: inline-block（或 inline-flex），否则完全不生效。
为什么 background-clip: text 常常没反应
这不是代码写错了，而是漏了三个硬性前提：
-
color: transparent必须显式设置——只靠-webkit-text-fill-color: transparent不够，Firefox 会忽略 - 元素不能是纯
inline（比如默认的span），必须加display: inline-block或display: inline-flex - 背景必须有“可透出的内容”：纯色背景看不到镂空效果，得是图片、渐变或视频
常见错误现象：文字消失不见 或 文字变成实心色块，基本就是这三个条件没凑齐。
background-clip: text 的兼容性现实
它在 Chrome、Safari、Edge（Chromium 内核）中工作良好，但 Firefox 全版本无视该属性。这意味着：
立即学习“前端免费学习笔记（深入）”；
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 如果项目需兼容 Firefox，必须提供降级方案（比如 fallback
color: #333） - 不要和
mix-blend-mode或text-shadow混用——它们逻辑冲突，渲染结果不可控 - 移动端 Safari 对长段落文字偶尔重绘错位，建议限制字数或用
will-change: transform缓解
性能影响很小，但背景是大图时，缩放/滚动可能触发高频重绘。
最简可用代码模板
以下是最小可行配置，已验证在 Chrome 124+、Safari 17.5+ 中生效：
.hollow {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block; /* 关键！ */
font-size: 4rem;
font-weight: bold;
}注意：background-clip: text 和 -webkit-background-clip: text 必须同时写；display 值不能是 block（会撑满整行，破坏居中）；渐变方向、颜色可按需替换。
真正麻烦的不是写法，而是判断什么时候该放弃这个方案——比如目标用户大量使用 Firefox，或背景必须是纯色，那就别硬扛，改用 -webkit-text-stroke 或 mix-blend-mode 更省事。
