必须同时设置 -webkit-background-clip: text、background-clip: text 和 color: transparent，否则在 Chrome、Safari、Edge 中失效或显示纯色；color: transparent 不可省略，否则文字默认色会遮盖渐变背景。
直接用 background-clip: text 配合渐变背景就能实现，但必须加 -webkit-background-clip: text 和 color: transparent，否则在 Chrome、Safari、Edge 里会失效或显示纯色。
为什么 color: transparent 不可省略
文字默认有颜色，它会盖住背后的渐变背景。设成 transparent 是为了让背景“透出来”；只靠 -webkit-text-fill-color: transparent 不够——Firefox 不认这个前缀属性，而 color: transparent 是通用兜底方案。
-
color: transparent是必须项，不是可选优化 -
-webkit-text-fill-color: transparent可以不写，现代浏览器已基本不需要它 - 如果漏掉
color: transparent，文字会变成浏览器默认黑色/灰色，渐变完全不可见
background-clip: text 的兼容性现实
这个属性在 Firefox 120+、Chrome 125+、Safari 16.4+ 中已原生支持 text 值，但旧版本（尤其 Safari ≤16.3）仍依赖 -webkit-background-clip: text。不加前缀 = 在 iOS 16.3 及更早系统上回退为纯色文字。
- 必须同时写
-webkit-background-clip: text和background-clip: text - 不能只写标准写法，也不能只写 WebKit 版本
- 部分安卓 WebView（如旧版 UC、QQ 浏览器内核）仍不支持，需准备降级色：
color: #333放在color: transparent前面
渐变方向与性能小细节
linear-gradient(45deg, ...) 比 to right 更稳妥：后者在某些 Safari 版本中解析异常，导致渐变断裂；角度值是数值型，解析更稳定。另外，别在动画中频繁重绘渐变文字——background-image 属于高开销属性，滚动或 hover 动画里用它可能掉帧。
- 推荐用角度写法：
linear-gradient(90deg, #ff0000, #00ff00) - 避免在
@keyframes里动态改background-image，改background-position更轻量 - 如果文字内容动态变化（如 Vue/React 绑定），确保父容器不触发 layout thrashing
真正容易被忽略的点是：这个效果本质是“把背景图抠进文字形状”，所以它和 font-smoothing、子像素抗锯齿、GPU 加速开关都有关联——在 macOS + Chrome 上若发现边缘发虚，加 -webkit-font-smoothing: antialiased 通常能缓解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
