background-clip: text 仅 WebKit 内核原生支持，需配合 color: transparent 和 linear-gradient 才生效；Firefox 不支持该属性，须用 mask-image 伪元素方案降级兼容。
background-clip: text 只在 WebKit 内核生效
直接写 background-clip: text 后文字没变色？大概率是浏览器不支持。这个属性目前仅被 Chrome、Edge（Chromium）、Safari 原生支持，Firefox 完全不认——它会把声明当无效值忽略，连 fallback 都不触发。
所以别指望靠 CSS 原生写法“一次写完、全端生效”。真要兼容 Firefox，得额外加一层 -webkit- 前缀 + color: transparent 组合，且必须配合 background-image: linear-gradient(...) 使用。
-
background-clip: text必须和color: transparent同时存在才有效 - 只写
background-clip: text不加color: transparent，文字还是默认黑/灰，渐变根本不会“透”出来 - Firefox 下即使加了
-webkit-background-clip: text也无效，前缀对它毫无意义
标准写法：-webkit- 前缀 + color: transparent 缺一不可
下面这段是当前最稳妥的渐变文字写法，能覆盖 Chrome / Edge / Safari，同时让 Firefox 降级显示纯色文字（不崩）：
.gradient-text {
background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}注意三点：
立即学习“前端免费学习笔记（深入）”；
-
background-image必须是渐变（linear-gradient或radial-gradient），纯色背景不行 -
-webkit-background-clip: text是 Safari 和旧版 Chrome 的命脉，漏掉就白写 -
color: transparent不能用rgba(0,0,0,0)或hsla(...,0)替代，只有transparent被所有支持该特性的浏览器识别为“让文字区域变透明、露出背景”
Firefox 兼容方案：用 mask-image 模拟（需额外样式控制）
如果必须让 Firefox 也显示渐变文字，目前唯一可靠路径是用 mask-image 配合伪元素或额外包裹层。但要注意：mask-image 的 mask 默认作用于整个盒模型，不是文字内容本身，所以得靠 mask-mode: alpha 或文字转路径（不现实）来对齐。
更实用的做法是双层结构：外层设渐变背景，内层用 mask-image 切出文字形状：
.gradient-text-fx {
position: relative;
color: #333; /* fallback for no JS / no mask support */
}
.gradient-text-fx::before {
content: attr(data-text);
position: absolute;
z-index: 1;
background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 100%);
mask-image: linear-gradient(to bottom, black 0%, black 100%);
mask-mode: alpha;
color: transparent;
}这方法的问题在于：
- 需要手动维护
data-text属性，动态文本难同步 -
mask-image在 Firefox 中虽支持，但对字体抗锯齿、子像素渲染影响大，小字号边缘容易发虚 - 无法响应文字换行、
text-align等排版变化，得额外用display: inline-block+width: max-content控制
别踩坑：line-height、font-weight 和 transform 会影响渐变对齐
渐变文字一旦加上 transform: scale() 或修改 line-height，背景图会按盒模型缩放/拉伸，导致颜色错位。比如：
-
line-height: 2会让渐变在行高范围内重复拉伸，首行颜色偏浅、末行偏深 -
font-weight: 900加粗后字形变宽，但背景图尺寸没变，渐变色块可能“卡在字中间”断开 - 用
transform: translateY(-2px)微调位置？那背景图也会跟着偏移，视觉上像渐变“飘”走了
解决办法只有一个：把渐变背景绑定到文字本身（靠 background-clip: text），而不是父容器；同时避免对文字盒做任何几何变换。如果真要动位置，改 padding 或 margin 更安全。
