必须配color: transparent，否则不透明文字会盖住渐变背景使background-clip: text失效；还需加-webkit-text-fill-color: transparent确保safari兼容，且元素需设为block或inline-block。
background-clip: text 为什么必须配 color: transparent
不透明的文字会盖住背后的渐变背景，background-clip: text 就完全失效。很多人写了渐变、加了裁剪，但忘了设文字本身透明，结果页面一片空白或只显示默认黑字。
必须同时写这两行，缺一不可：
-
color: transparent（标准属性，现代浏览器都认） -
-webkit-text-fill-color: transparent（Safari 和旧版 Chrome 必须靠它才生效）
只写 color: transparent 在 Safari 15.6 及更早版本里，文字可能直接消失不见——不是 bug，是渲染引擎对 background-clip: text 的实现依赖 -webkit-text-fill-color 做填充控制。
background-position 动画怎么让渐变“流动”起来
渐变背景默认静止，要让它动，核心是用 animation 改变 background-position。关键点不在“动”，而在“动得自然”：
- 必须设
background-size: 200% 200%（横向至少 200%，否则位移没空间，动画卡死在起点） - 动画起止值建议用
0% 50%→100% 50%，避免跳帧；用0% 50%→-100% 50%也能循环，但部分 Android WebView 会闪一下 - 别用
ease-in-out，它会让渐变在两端减速，造成“拖尾感”；linear最稳
示例动画片段：
@keyframes gradient-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.gradient-text {
animation: gradient-move 4s linear infinite;
}
多色彩虹渐变的 angle 和 stop 位置怎么调才不脏
直接写 linear-gradient(90deg, #f43b47, #453cf4, #00c9ff) 容易颜色挤在一起，尤其在小字号下变成灰蒙蒙一团。真正好用的彩虹需要显式控制色标位置：
- 用百分比明确每个颜色停驻点，比如
#f43b47 0%, #feab3a 25%, #00c9ff 50%, #4cc9f0 75%, #4361ee 100% - 角度选
90deg（左→右）最安全；45deg在短词上容易头重脚轻，180deg（上→下）在行高不够时会裁掉顶部色带 - 避免超过 5 种主色，CSS 渐变插值在低端设备上可能出错，iOS 16.4 之前曾有 6 色以上渲染异常的报告
移动端和 Safari 的兼容性陷阱
这个效果在 iOS Safari 上最娇气。以下三点不处理，大概率白屏或闪退：
-
display: inline-block或display: block必须显式声明，inline元素在 iOS 15+ 上background-clip: text会失效 - 字体不能用系统默认的
system-ui或未声明font-weight，iOS 对细体字（如font-weight: 300）的裁剪精度极差，建议锁死font-weight: 600或700 - 动画不能叠加在
:hover上启停——iOS 不触发伪类动画，必须用 class 切换或 JS 控制animation-play-state
最易被忽略的是：动画 duration 小于 2.5s 时，iOS 17.5 的 WebKit 渲染管线会跳过首帧，导致文字初始状态无渐变，等 1 秒后才突然出现。设成 3s 或以上更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
