使用CSS background-clip 与渐变背景可实现文字渐变效果，需设置 background-image 为线性或径向渐变，配合 background-clip: text 和 -webkit-text-fill-color: transparent 使背景穿透文字；通过调整渐变方向、颜色及添加 background-position 过渡，可实现丰富视觉效果与 hover 动画，关键点是必须将文字填充色设为透明以确保背景可见。
要实现文字渐变效果，可以结合 CSS 的 background-image 渐变与 background-clip、-webkit-text-fill-color 属性，将背景裁剪到文字区域，从而呈现出渐变文字。这种方法兼容性良好，尤其在现代浏览器中表现稳定。
1. 使用线性渐变背景与背景裁剪
通过设置文字的背景为线性渐变，并使用 background-clip: text 将背景限制在文字形状内，再配合透明填充颜色，即可实现渐变文字效果。
说明：
- background-image 定义渐变颜色。
- background-clip: text 是关键，它让背景只显示在文字区域内（需 WebKit 前缀兼容）。
- -webkit-text-fill-color: transparent 将文字填充设为透明，使背景透出。
2. 支持多方向与多种渐变
你可以更换 linear-gradient 的角度或使用 radial-gradient 实现不同视觉效果。
- 从上到下渐变：
linear-gradient(to bottom, #00bfff, #000) - 径向渐变：
radial-gradient(circle, #ffeb3b, #f44336) - 多色渐变：
linear-gradient(90deg, red, yellow, blue)
3. 添加 hover 动画增强交互
可以通过 CSS 动画或过渡让渐变动起来，提升视觉吸引力。
立即学习“前端免费学习笔记（深入）”；
.gradient-text { background-image: linear-gradient(90deg, #ff7a00, #ff0080); background-size: 200% 100%; transition: background-position 0.5s ease; }.gradient-text:hover { background-position: 100% 0; }
技巧： 利用 background-size 扩展背景，再通过 background-position 变化实现渐变流动效果。
基本上就这些，不复杂但容易忽略细节，比如必须设置文字颜色透明，否则看不到背景。
