必须加 color: transparent，否则渐变完全不可见；background-clip: text仅裁剪背景至文字轮廓，不隐藏文字本身，需配合color: transparent或-webkit-text-fill-color: transparent才能显露渐变。
必须加 color: transparent，否则渐变完全不可见。 这是绝大多数人第一次写就失败的根源——文字颜色默认不透明，直接盖住了背景渐变。
为什么 background-clip: text 单独用没效果
因为 background-clip: text 只是“裁剪背景到文字轮廓”，它不改变文字本身的渲染层。文字仍按 color 值绘制在最上层。所以即使背景是渐变，也会被实色文字挡住。
必须配合以下任一方式之一：
-
color: transparent（推荐，语义清晰，兼容性好） -
-webkit-text-fill-color: transparent（旧版 Safari 必须用这个，color在某些版本里会被忽略）
两者常同时写，确保覆盖所有 WebKit 内核场景。
立即学习“前端免费学习笔记（深入）”；
linear-gradient() 方向与颜色断点怎么配
方向参数影响视觉动势，不是纯技术问题，而是设计判断：
-
to right或90deg：适合横排长标题，渐变自然流动 -
to bottom或180deg：适合竖排或强调垂直张力（如按钮悬停） - 多色断点建议显式写位置，比如
linear-gradient(90deg, #ff8a00 0%, #e52e71 50%, #4f00ff 100%)，避免浏览器自动均分导致色块比例失真
注意：repeating-linear-gradient() 也能用，但需配合 background-size 控制重复密度，否则容易糊成一片。
哪些浏览器会掉链子
background-clip: text 在 Firefox 70+、Chrome 71+、Edge 79+、Safari 12.1+ 支持良好。但仍有两个现实坑点：
- Safari 12.0 及更早：只认
-webkit-background-clip: text，且必须搭配-webkit-text-fill-color: transparent，color: transparent无效 - Firefox 早期版本（text 值，会回退为
border-box，整段文字变成单色块
降级方案不是加 polyfill，而是 CSS 层叠兜底：color: #333; 写在前面，再写渐变规则——不支持的浏览器就显示纯色，支持的则覆盖生效。
动画渐变文字时 background-position 怎么动才顺
想让渐变“流”起来，核心是移动背景图层，而不是改颜色。常见错误是直接 animating background-image，这会触发重绘，卡顿明显。
- 正确做法：固定
background-size（如200% 200%），然后 animatingbackground-position - 起始位置设为
0% 50%，结束设为200% 50%，形成无缝平移 - 务必加
background-repeat: no-repeat，否则重复渐变会打架
示例关键帧：@keyframes slide { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
真正难的不是写出第一行渐变代码，而是判断什么时候该用 SVG <lineargradient></lineargradient> 替代 CSS 方案——比如需要精确控制每个字母的渐变角度，或者要和 Canvas 动画同步时，background-clip 就不够用了。
