必须加-webkit-前缀才能生效，因Safari、旧Chrome及iOS/macOS系统仅支持-webkit-background-clip:text和-webkit-text-fill-color:transparent，且Firefox110+才开始支持标准属性。
直接用 background-clip: text 配合 color: transparent 就能实现，但不加 -webkit- 前缀在 Safari 和旧版 Chrome 里会完全失效——这不是“可能不生效”，而是“一定不显示”。
为什么 background-clip: text 必须配 -webkit- 前缀
标准属性 background-clip: text 在 Firefox 110+ 才开始支持（2023 年中），而 Safari 直到 iOS 16.4 / macOS Ventura 13.3 才正式启用，且仍要求同时声明 -webkit-background-clip: text 和 -webkit-text-fill-color: transparent。Chrome 从 72 版起就只认 WebKit 版本，不加前缀等于没写。
-
-webkit-background-clip: text是实际起效的属性，background-clip: text只是未来兼容占位 -
-webkit-text-fill-color: transparent比color: transparent更可靠：后者在某些 Android WebView 中会被忽略 - 漏掉任意一个 WebKit 属性，文字就会退回纯色（通常是黑色或继承色），而不是“淡一点”或“模糊”
渐变方向和颜色停靠点怎么写才不出错
别用 to right 这类关键词——它在 Safari 15.6 之前不支持，且不同浏览器对 to top 的解析方向有差异。统一用角度值（如 90deg）最稳。
-
linear-gradient(90deg, #ff6b6b, #4ecdc4, #44b5b1)：90deg = 从左到右，所有浏览器一致 - 颜色节点不要超过 6 个：Firefox 对多停靠点渐变的渲染有性能抖动，尤其在滚动时
- 避免在
background-image里混用repeating-linear-gradient：它和background-clip: text组合时，Safari 会随机截断文字
文字一动就变黑？检查 display 和 background-size
渐变文字在动画、悬停或 JS 动态插入后变回实色，八成是 display 或 background-size 没设对。这个坑比兼容性还隐蔽。
立即学习“前端免费学习笔记（深入）”；
- 元素必须是
display: inline-block或block；inline元素（比如默认的span）在部分 Safari 版本中无法正确裁剪背景 - 做流动动画时，
background-size至少设为200% 200%，否则background-position移动时边缘会露白或卡顿 - 如果父容器用了
transform: scale()或will-change，需给文字元素加backface-visibility: hidden，否则 Chrome 可能跳过裁剪计算
最易被忽略的是：渐变文字不能嵌套在 filter: opacity() 或 mix-blend-mode 的父元素里——这两个属性会强制关闭 background-clip: text 的渲染通道，连加前缀都救不回来。
