background-clip: text 不生效是因为需配合 color: transparent 和 background-image（如 linear-gradient）才能显示渐变文字；必须加 -webkit-background-clip: text 前缀以兼容 Safari 和旧版 Chrome。
background-clip: text 为什么文字没变色？
直接写 background-clip: text 不生效，是因为它只定义“裁剪区域”，不负责上色——必须配合 color: transparent 和 background-image 才能看见渐变。
-
color: transparent是关键，漏掉就还是纯色文字 -
background-clip: text必须和-webkit-background-clip: text一起写，否则 Safari 和旧版 Chrome 不认 - 背景图得是线性渐变（
linear-gradient）或径向渐变，纯色background-color不会触发文字填充效果
渐变文字在不同浏览器的兼容写法
Firefox 从 70+ 开始原生支持 background-clip: text，但默认仍需 -webkit- 前缀；Safari 直到 15.4 才去掉前缀依赖。稳妥写法要兼顾三端：
h1 {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
- 没有
-webkit-前缀 → Safari 15.3 及更早版本显示为纯黑/默认色 - 只写
-webkit-不写标准属性 → Firefox 70+ 或未来新引擎可能降级处理 - 如果用 CSS 变量控制渐变色，记得变量也要在
background中使用，不能只作用于color
用 background-clip: text 做动画会卡顿吗？
会，尤其在滚动或频繁重绘场景下。因为 background-clip: text 触发的是“文字层与背景层合成”，浏览器无法硬件加速该合成过程。
- 避免对大量文字（如整段
<p></p>）做渐变 + hover 动画 - 渐变方向变化（比如
linear-gradient(0deg, ...)→90deg）比颜色变化更耗性能 - 真需要动效，优先用
background-position平移渐变，而不是改角度或色值
替代方案：SVG text + gradient 更稳但更重
当遇到 background-clip: text 在某些安卓 WebView 或低版本 iOS 中彻底失效时，SVG 是最可靠的 fallback。
立即学习“前端免费学习笔记（深入）”；
- 把文字包进
<svg><text></text></svg>，再用<defs><lineargradient></lineargradient></defs>定义渐变并fill="url(#grad)" - 缺点是无法继承父级字体设置，字号、行高、字重都得手动设，且 SEO 和可访问性略弱
- 适合标题类少量文字；正文段落建议降级为纯色，别硬撑 SVG
