background-clip: text 必须同时满足四要素才生效：background-image含渐变、-webkit-background-clip: text、color: transparent、-webkit-text-fill-color: transparent；缺一即显示默认色，渐变不可见。
background-clip: text 必须配齐四要素才生效
单独写 background-clip: text 一定没反应，不是语法错，而是缺了三个配套声明。它本质是“用文字当蒙版裁剪背景”，所以必须同时满足：背景得是渐变（background-image: linear-gradient()）、浏览器得认这个裁剪方式（-webkit-background-clip: text）、文字本身得透明（color: transparent 和 -webkit-text-fill-color: transparent）。漏掉任意一个，文字就显示为默认色或纯黑/白，渐变完全不可见。
常见错误是只加了 -webkit-background-clip: text 却忘了 -webkit-text-fill-color: transparent——尤其在 Safari 和 iOS WebView 中，文字会直接盖住渐变，看起来像没生效。
-
background-image必须是linear-gradient()或radial-gradient()，纯色背景无效 -
-webkit-background-clip: text和background-clip: text建议都写，兼顾旧版 WebKit 和新版 Firefox（119+） -
color: transparent和-webkit-text-fill-color: transparent缺一不可，后者不是可选前缀，是 Safari 的硬性要求 - 元素需为内联级（如
<h3>、<span>），块级元素要加display: inline或inline-block
Bootstrap 的 .text-* 类会强制覆盖 color，必须删干净
加了所有四要素还是没渐变？大概率是 HTML 里残留了 .text-primary、.text-white 这类 Bootstrap 文字颜色类。它们内部写了 color: #0d6efd !important 之类规则，会直接覆盖你设的 color: transparent，导致蒙版失效。
实操中必须手动删掉所有 .text-* 类——一个都不能留。不要指望用 !important 覆盖，因为 Bootstrap 的工具类权重高且带 !important，后写也赢不了。
立即学习“前端免费学习笔记（深入）”；
- 检查 DOM 元素的 class 属性，确认没有
.text-开头的类 - 如果依赖 Bootstrap 的响应式字号（如
fs-4），可以保留，它不干涉color - 深色模式下，别用
text-dark或text-light，它们同样会覆盖color: transparent
动画或响应式场景下 background-size 和 background-position 得显式控制
想让渐变文字动起来（比如滚动时平移渐变），只写 animation: background-position 2s infinite 不够。Safari 和部分安卓 WebView 对渐变背景的重绘很敏感，不设 background-size 会导致拉伸、跳变甚至卡死。
正确做法是：把渐变宽度设为文字宽度的 200%，再用 background-position 控制起始偏移。这样动画才能平滑流动，而不是“一格一格闪”。
- 加
background-size: 200% 200%（水平和垂直都放大） - 动画起点设
background-position: 100% 0，终点设background-position: 0 0 - 避免用
to right这类方向值做动画，改用角度（如270deg）更稳定 - 移动端 iOS Safari 中，
ch单位在动画里可能计算不准，建议用em或固定像素值
Firefox 和 Safari 的兼容细节差异不能忽略
Firefox 119+ 支持标准 background-clip: text，但如果你的用户还在用旧版（比如企业内网环境），没写 -webkit-background-clip: text 就会回退成纯色文字。Safari 则对 background-position 更敏感，不显式声明就容易变形。
真正容易被忽略的是：Firefox 不支持 -webkit-text-fill-color，而 Safari 忽略 background-clip: text（只认私有前缀）。所以四要素里两个前缀属性不是“为了兼容”，是各自平台的运行必需项。
- 不要省略
-webkit-background-clip: text，哪怕只跑 Firefox —— 用户可能用旧版 Safari 打开 - 不要省略
-webkit-text-fill-color: transparent，否则 iOS 上文字不透明，渐变彻底消失 - 渐变色标别写
50%, #fff，iOS 15.4 之前解析失败，改用50% #fff - 如果项目需支持 IE，这条路走不通——IE 完全不支持
background-clip: text，得降级为图片或 SVG
最麻烦的点其实是调试时看不到问题：浏览器开发者工具里 color 显示为 transparent，但文字就是不透明。这时候第一反应不该是改 CSS，而是立刻检查 HTML 有没有漏删 .text-* 类——它比所有样式优先级都高，且不报错。
