background-clip: text 不起作用是因为需同时满足：块级显示（如 display: inline-block）、color: transparent、-webkit-background-clip: text 前缀，且背景须为渐变或图片；firefox 不支持。
background-clip: text 为什么不起作用
直接写 background-clip: text 没效果，是因为它默认只对块级元素生效，且必须配合 color: transparent 才能让文字“透出”背景。浏览器还要求开启 WebKit 前缀支持——现代 Chrome、Safari、Edge（Chromium 内核）可用，Firefox 目前仍不支持该组合。
- 必须设置
display: inline-block或block，inline元素（如默认的<span></span>）会忽略background-clip: text - 必须同时声明
color: transparent，否则文字颜色会覆盖背景 - 必须加
-webkit-background-clip: text，仅写标准属性无效 - 背景需是渐变或图片，纯色背景看不出“渐变色文字”效果
实现渐变文字的最小可行 CSS 写法
以下代码在 Chrome / Edge / Safari 中可直接运行，无需 JS：
.gradient-text {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #44b5f0);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
}
注意：如果文字在按钮或链接中，别忘了重置 text-decoration 和 outline，否则下划线或焦点框可能遮挡效果。
用 CSS 变量动态切换渐变色时的坑
想通过 JS 切换主题色？可以，但要注意 background 是简写属性，CSS 变量不能直接插在 linear-gradient() 里作为颜色值——除非你用 background-image 拆开写。
- 错误写法：
background: linear-gradient(45deg, var(--c1), var(--c2))—— 大部分浏览器不解析变量中的渐变参数 - 正确做法：改用
background-image: linear-gradient(...)，并确保变量已定义为合法颜色值（如#ff6b6b） - 若用 Tailwind，别依赖
bg-gradient-to-r类，它不支持动态色；得自己写带变量的@layer utilities
替代方案：SVG text + gradient（兼容 Firefox）
如果必须支持 Firefox，background-clip: text 行不通，SVG 是最稳的降级路径：
<svg viewbox="0 0 200 60"><defs><lineargradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#ff6b6b"></stop><stop offset="100%" stop-color="#4ecdc4"></stop></lineargradient></defs><text x="10" y="40" fill="url(#grad)" font-size="24">Hello</text></svg>
缺点是无法像纯 CSS 那样响应父容器字号缩放（需手动绑定 font-size 或用 em 单位），且 SEO 和可访问性略弱于语义化 HTML 文本。
真正麻烦的不是怎么写，而是得时刻想着：这段渐变文字要不要被屏幕阅读器读出来？要不要打印时保留颜色？要不要适配深色模式自动反色？这些都不是 background-clip 自己能解决的。
