background-clip: text需配合color: transparent或-webkit-text-fill-color: transparent使用，且必须加-webkit前缀，仅对background-image生效，Safari和Firefox支持有限，需提供降级颜色。
为什么直接写 background-clip: text 没反应
因为浏览器默认用 color 覆盖文字区域，背景再怎么渐变也透不出来。必须同时设 color: transparent（或 -webkit-text-fill-color: transparent），才能让底层渐变“露脸”。漏掉这一步，看到的要么是纯黑/灰字，要么是空白。
另外，background-clip: text 在 Safari 和旧版 Chrome 中不生效——必须加 -webkit-background-clip: text 前缀。标准属性目前只在较新 Chrome/Firefox 支持，Safari 仍只认前缀版。
-
color: transparent和-webkit-text-fill-color: transparent效果一致，但后者优先级更高，可覆盖某些全局color设置 - 如果用了
!important强制设置color，-webkit-text-fill-color也能绕过它 - 元素不能是块级且未设
display: inline或inline-block，否则文本渲染框不参与裁剪
background-image 必须是渐变，不能是 background-color
background-clip: text 只对 background-image 生效，包括 linear-gradient()、radial-gradient() 等函数。写成 background: linear-gradient(...) 看似没问题，但一旦和 background-color 混用（比如 background: #fff linear-gradient(...)），层叠规则会让颜色覆盖掉渐变。
- 显式写
background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4)，避免简写歧义 - 不要在同一规则里同时设
background-color和渐变，除非你明确需要 fallback 色（此时仍要确保color: transparent有效） - 径向/锥形渐变也可用，但线性最稳定；
conic-gradient()在 Safari 中支持有限，慎用
渐变在 Safari 中突然变回纯色文字
Safari 对合成上下文极其敏感：只要元素或任意父级触发了合成（比如 opacity、transform、filter、will-change），background-clip: text 就会直接失效，降级为普通文字色。
立即学习“前端免费学习笔记（深入）”；
- 检查并移除所有
transform: translateZ(0)、opacity: 0.99类似写法 - 临时注释掉父容器的
filter: drop-shadow()或will-change: transform - 用
@supports (-webkit-background-clip: text)包裹渐变逻辑，外层保留一个安全的color作为降级
文字短时渐变“挤在一边”或颜色不均
渐变是按元素盒模型计算的，不是按字符宽度分布。短文字配大角度渐变（如 to right），容易只显示起始色；长文字又可能拉得太开，中间发白。
解决办法是控制背景尺寸和定位：
- 加
background-size: 200% 200%扩大渐变范围，再配background-position: -50% -50%居中对齐 - 想让渐变随文字长度平铺，改用
background-size: auto 200%+background-repeat: no-repeat - 避免用
repeating-linear-gradient，小字号下易出锯齿或闪烁
background-clip: text（v128 仍无），所以仅靠这个方案，用户看到的就是透明文字——也就是空白。别指望 @supports 能完全兜底，得真有 fallback 颜色，而且要确保它在所有不支持场景下都生效。 
