必须同时设置 -webkit-background-clip: text、background: linear-gradient() 和 color: transparent，且元素为 inline 或 inline-block；firefox 不支持该特性，需用 @supports 降级。
直接用 background-clip: text 配合 linear-gradient() 就能做出彩虹文字，但必须加 -webkit-background-clip: text 和 color: transparent，缺一不可；Firefox 不支持该属性，不能指望它原生渲染渐变。
为什么文字还是纯色，不是渐变？
常见错误现象：background-image 显示了，但文字仍是黑/白/默认色；开发者工具里 background-clip 被划掉（invalid）。
-
color: transparent是硬性前提——不设透明，文字本色会盖住背景，裁剪无意义 - 元素
display必须是inline或inline-block；block元素（如默认<div>）容易因盒模型干扰裁剪范围 <li>旧版 Safari 要求同时写 <code>-webkit-text-fill-color: transparent，仅靠color: transparent可能失效 - 别漏掉
-webkit-background-clip: text：Chrome 120+、Safari 16.4+ 已支持标准属性，但 iOS 15.4 之前仍依赖前缀 - 推荐写法：
background: linear-gradient(to right, #ff6b6b, #ffa500, #ffd700, #4ecdc4, #44b5b1, #6a5acd) - 避免
repeating-linear-gradient：在 Windows + Chrome 下易出现色带断裂，尤其font-size 时 - 角度优先用语义值（
to right/to bottom），比90deg更直观，也更利于后续 JS 动态修改 - 慎用 rgba 透明色标：若背景非纯白，叠加后可能偏灰；需要半透效果时，改用
mask-image更可控 - 用
@supports not (background-clip: text)检测，给 Firefox 单独设color: #333或品牌主色 - 不要强行用
mask-image替代：虽然语法类似（mask-image: linear-gradient(...)），但它依赖 luminance 模式，text-shadow或描边会意外干扰蒙版边缘 - 若必须动态控制（如 JS 切换色相），优先考虑
CSS @property+background-position动画，比 mask 方案性能更稳、调试更直觉 - 加
-webkit-font-smoothing: antialiased强制走灰阶抗锯齿，边缘更干净 - 避开过细字体：
font-weight: 100或font-size: 14px以下，窄笔画无法承载多色过渡 -
text-shadow描边慎用：模糊半径（blur-radius）＞1px 会吃掉渐变细节，建议用 0.5px 硬边描边增强对比 - 动画中频繁修改
background-position时，加will-change: background-position防掉帧，但别滥用——只对高频更新的元素加
怎么写一个靠谱的彩虹色标？
用光谱顺序（红→橙→黄→绿→蓝→靛→紫）模拟视觉连续性，但别堆满 7 色——小字号下色带混叠、边缘发虚。
Firefox 怎么兼容？
Firefox 目前（截至 2026 年 4 月）仍不支持 background-clip: text，包括带前缀的 -webkit- 版本。降级方案不是“假装支持”，而是明确 fallback。
为什么在深色背景上文字发虚？
这不是 bug，是 subpixel rendering + 渐变采样叠加导致的抗锯齿失真，尤其在非整数缩放（如 125%）、Retina 屏或启用了字体平滑时明显。
真正难的不是写出第一行彩虹字，而是想清楚：这个效果是否在所有目标设备上可读、可访问、可维护。比如高对比度模式下，color: transparent 会让文字彻底消失，必须配合 @media (forced-colors: active) 重置为实色。
