必须同时设置-webkit-background-clip: text、background-image和color: transparent才能实现彩虹文字；firefox不支持该特性，需提供降级方案；动画时需显式声明background-size以确保滚动平滑。
不能只靠 background-clip: text 就让文字变彩虹——漏掉 -webkit-background-clip: text 或 color: transparent，效果直接消失。
为什么写 background-clip: text 没反应
Chrome、Edge、Safari 当前仍依赖 -webkit-background-clip: text 才能生效；W3C 标准的无前缀版本在这些浏览器里形同虚设。同时，color 是绘制层最上层，不设为 transparent，文字就盖住所有背景。
-
background-clip: text单独写 → 渐变背景完全不可见 -
color: #000（或任何非 transparent 值）→ 只看到纯色字，渐变被遮挡 - 元素是
div且没设display: inline或inline-block→text值无效（仅对参与文本流的内联盒有效）
background-image 必须显式声明，别用 background 简写
background: linear-gradient(...) 看似简洁，但一旦后续叠加 background-color 或其他背景属性，层叠顺序可能意外覆盖渐变。浏览器会把 background 解析为完整简写，容易误删 background-image 层。
- 推荐写法：
background-image: linear-gradient(45deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080); - 禁用写法：
background: linear-gradient(...) #fff;—— 后面的#fff会被当作background-color，直接压掉渐变 - 如需降级色，应单独加
color: #666;并确保color: transparent在最终生效链中胜出（比如用更具体的选择器或!important）
Firefox 用户看到空白？这是正常现象
截至 Firefox v128（2026年4月），background-clip: text 仍未被支持，且无 -moz- 前缀替代方案。这意味着纯靠该 CSS 实现，Firefox 下文字就是透明的——也就是视觉上“消失”了。
- 不要指望
@supports (background-clip: text)检测能兜底：它在 Firefox 中返回false，但你没法用它自动 fallback 到彩色文字 - 可行做法：服务端或 JS 检测
navigator.userAgent或CSS.supports('background-clip', 'text')，动态插入类名或内联样式 - 更稳妥的 fallback：给文字加一层
color: #333;作为基础色，并用@supports包裹渐变逻辑，保证非 WebKit 浏览器至少有可读文字
动画滚动彩虹文字要小心 background-size
想让渐变动起来，常见做法是配合 animation 改变 background-position。但若没设 background-size，默认是 auto，会导致位移距离不可控，尤其在不同字号/容器宽高下表现不一致。
- 必须加：
background-size: 300% 300%;（数值越大，滚动越平缓） - 动画关键帧里写
background-position: 0 0;→background-position: 100% 100%;才能形成连续滑动 - 别用
background: ...简写去覆盖已有渐变，否则background-size会重置为auto
真正卡住人的从来不是怎么写第一行渐变，而是忘了 color: transparent 被其他样式覆盖，或者在响应式布局里没重设 background-size 导致动画抽搐——这些细节不会报错，只会让效果在某个屏幕宽度下突然失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
