必须设为 transparent 是因为 color 默认会覆盖 background-image，需用 text-fill-color: transparent “挖空”文字使渐变透出；-webkit- 前缀是因 background-clip: text 和 text-fill-color 属非标准特性，仅 WebKit/Blink 内核原生支持；Firefox 至今不支持该特性，会降级显示。
text-fill-color 为什么必须设为 transparent
直接用 background-image: linear-gradient() 配合 background-clip: text 时，文字默认颜色（color）会盖在渐变背景之上，导致渐变不可见。必须用 text-fill-color: transparent 把文字“挖空”，让底层背景透上来。
注意：Chrome / Edge / Safari 支持 text-fill-color，Firefox 不支持——它只认 color: transparent，但后者在部分旧版本中会破坏 background-clip: text 的行为。稳妥写法是两者都写：
h1 {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}为什么必须加 -webkit- 前缀
background-clip: text 和 -webkit-text-fill-color 都属于非标准 CSS 特性，目前仅被 WebKit/Blink 内核浏览器原生支持。-webkit-background-clip: text 是实际生效的关键；不加前缀，在 Chrome/Firefox/Safari 中大概率失效。
当前状态：
立即学习“前端免费学习笔记（深入）”；
- Chrome / Edge：依赖
-webkit-background-clip - Safari：同上，且要求
color: transparent必须存在 - Firefox：仍不支持
background-clip: text，任何前缀均无效
linear-gradient 的方向和色标怎么影响文字效果
渐变方向决定颜色过渡走向，对文字渲染很敏感。比如：
-
linear-gradient(to right, red, blue)→ 每个字符从左到右渐变 -
linear-gradient(90deg, red, blue)→ 效果同上，但角度更易控制多色停靠 -
linear-gradient(0deg, red, yellow 50%, blue)→ 中间黄色最宽，适合强调文字中部
文字越长，渐变跨度越大；短标题可能只显示起点色。若想每个字都独立渐变，需配合 background-size + background-position 微调，但通常没必要——直接用整行渐变更自然。
Firefox 下完全没效果？这是正常的
截至 2024 年，Firefox 仍未实现 background-clip: text。所有基于它的渐变文字方案在 Firefox 中都会回落为纯色（color 值）或透明（如果写了 color: transparent 且没兜底）。
可行的应对方式只有两种：
- 接受降级：用
@supports包裹渐变逻辑，Firefox 自动跳过 - 用 SVG
别试图用 JS 动态插入 canvas 或伪元素模拟——性能差、缩放糊、选中文本时颜色断裂。真实项目里，渐变文字本质是装饰性视觉增强，不是核心信息传达手段。
