渐变文字
渐变文字：background 设渐变色，再用 background-clip: text 裁剪到文字形状，最后用透明色（color: transparent 或 -webkit-text-fill-color）露出渐变。兼容性需加 -webkit- 前缀。
进阶：把渐变背景放大到 200%，配合 animation 移动 background-position，就是流动的彩虹文字效果。
- 三件套：渐变背景 + background-clip: text + 透明文字色
- -webkit-text-fill-color: transparent 比 color: transparent 更稳
- 背景放大 + 动 background-position = 流动渐变
HTML
<style> .grad { text-align: center; font-size: 52px; font-weight: 800; margin: 40px 0; background: linear-gradient(90deg, #f778ba, #4a9eff, #57ab5a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } </style> <div class="grad">渐变文字 Gradient Text</div>
本节要点渐变文字 = 渐变背景 + background-clip:text + 文字色透明（记得 -webkit- 前缀）。
