必须同时声明 -webkit-background-clip: text 和 -webkit-text-fill-color: transparent 才能在 Safari、iOS WebView、旧版 Chrome 中正常显示渐变文字，仅用标准 background-clip: text 和 color: transparent 会导致彻底回退为纯色文字。
直接用 background-clip: text 配合 color: transparent 就能实现，但不加 -webkit-background-clip: text 和 -webkit-text-fill-color: transparent，在 Safari、iOS WebView、旧版 Chrome 里一定不显示——不是“可能失效”，是彻底回退成纯色文字。
为什么 -webkit-background-clip:text 必须写，而且不能只靠 background-clip:text
标准属性 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 属性必须成对出现；只写一个，渐变照样不显示
- Firefox 110 以下、Safari 15.6 以前的用户，只能看到回退色（需提前设好
color值）
linear-gradient 方向和颜色节点怎么写才稳
别用 to right 这类关键词——Safari 15.6 之前不支持，且 to top 在不同浏览器里解析方向不一致。统一用角度值最安全：
立即学习“前端免费学习笔记（深入）”；
-
90deg= 从左到右，所有浏览器一致 - 颜色节点不要超过 6 个：Firefox 渲染多停靠点渐变时有性能抖动，尤其滚动中容易卡顿
- 避免混用
repeating-linear-gradient：和background-clip: text组合时，Safari 会随机截断文字
示例（安全写法）：background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #44b5b1);
文字一动就变黑？检查 display 和 background-size
渐变文字在 hover、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 和 mix-blend-mode 会直接禁用渐变文字
渐变文字不能嵌套在 filter: opacity() 或 mix-blend-mode 的父元素里——这两个属性会强制关闭 background-clip: text 的渲染通道，连加前缀都救不回来。
哪怕只加了 opacity: 0.99，整个渐变都会消失。这不是 bug，是浏览器渲染管线的底层限制。如果必须用透明度，改用 rgba() 填充色或调整父级 background 的 alpha 通道，而不是上 filter。
