可行但仅限WebKit浏览器，需同时设置-webkit-background-clip:text和-webkit-text-fill-color:transparent，非标准方案且Firefox不支持，须配fallback。
用 background-image + -webkit-text-fill-color 实现文字渐变填充，确实可行，但只在 WebKit 内核浏览器（Chrome、Safari、Edge 新版）里生效
这不是 CSS 标准方案，而是利用了 WebKit 的私有行为：把文字当成“镂空蒙版”，让背景图透过文字显示，再用 -webkit-text-fill-color: transparent 把字色清空。Firefox 和旧版 IE 完全不支持，别指望它跨浏览器开箱即用。
常见错误现象：background-image 设了线性渐变，但文字还是纯黑；或者渐变方向不对、文字边缘发虚；又或者加了 background-clip: text 却没配 color: transparent，结果啥也没显示。
- 必须同时设置
background-image和-webkit-background-clip: text（注意是-webkit-前缀） -
-webkit-text-fill-color: transparent不可省略，仅靠color: transparent在 Safari 里可能失效 - 文字需有明确的
display（如inline-block或block），否则background-clip: text不起作用 - 避免对父容器设
overflow: hidden，否则 Safari 下渐变可能被意外裁切
为什么不能只写 background-clip: text 而不加 -webkit- 前缀
因为 background-clip: text 目前仍是非标准属性，W3C 没正式采纳。Chrome 和 Safari 只认 -webkit-background-clip: text，而 Firefox 根本不实现该值（哪怕加前缀也无效）。你写 background-clip: text 在所有浏览器里都只是无效声明。
使用场景：适合做标题、按钮文字等非关键内容的视觉强化；不适合用于正文、可访问性要求高的文本，因为屏幕阅读器不受影响，但颜色对比度可能不达标。
立即学习“前端免费学习笔记（深入）”；
- 实际写法必须是：
-webkit-background-clip: text，然后补一句background-clip: text（未来兼容占位，当前无实质作用） - 不要试图用 Autoprefixer 自动加前缀——它不会处理
text这个值，得手动写 - 如果项目要支持 Firefox，得 fallback 到纯色文字或 SVG 文本
渐变方向错乱、文字显示不全？检查 background-size 和 background-position
文字渐变不是“每个字单独渐变”，而是整个元素的背景图透过文字区域显示。所以如果你用 linear-gradient(to right, ...)，但文字很长，背景图默认平铺或缩放不当，就会出现左端鲜艳、右端变灰甚至消失的情况。
性能影响小，但兼容性陷阱明显：Safari 对 background-size: 200% 200% 的解析和 Chrome 略有差异，动画时容易闪动。
- 推荐固定背景尺寸：
background-size: 200% 200%配合background-position: -100% -100%，方便后续用transition动画 - 如果文字宽度不定（比如响应式标题），改用
background-size: cover，但需确保容器有明确宽高，否则 Safari 可能渲染异常 - 慎用
repeating-linear-gradient做文字纹理——部分 Safari 版本会触发重绘卡顿
想让渐变文字在暗色模式下自动适配？别依赖 @media (prefers-color-scheme) 直接改渐变色
因为 -webkit-text-fill-color: transparent 已经把文字“挖空”了，暗色模式切换时，渐变背景本身并不会自动反转。你看到的还是原来那组色值，很可能在深色背景下变得难以辨认。
容易被忽略的点：很多人以为加个 @media (prefers-color-scheme: dark) 改 background-image 就行，但忘了渐变起点/终点的语义可能需要反向定义（比如亮色模式用 to bottom，暗色模式可能得换 to top 才协调）。
- 安全做法：为暗色模式单独定义一套更饱和、明度更高的渐变色，而不是简单调亮度
- 别在渐变里用
currentColor——它在透明文字场景下取不到有效值 - 如果用 CSS 变量控制渐变，记得变量要在 :root 里定义，并在媒体查询中覆盖，否则 Safari 可能不重算
