color 不能设渐变色，因 css 规范禁止；需用 background + background-clip: text 四行组合（含 -webkit 前缀和 transparent 填色），且元素须为 block/inline-block，父容器背景需设 transparent。
不能用 color 直接设渐变色，这是语法错误，不是兼容性问题——color 只接受单色值，linear-gradient() 是 <image></image> 类型，浏览器会静默忽略它。
为什么 color: linear-gradient() 完全不生效
这不是“没加载出来”或“前缀漏了”，而是 CSS 规范层面禁止：所有浏览器都把这行当无效声明处理。你在开发者工具里能看到它被划掉（invalid），控制台也不会报错，但效果就是零。别浪费时间调 z-index 或 opacity，根源在这里。
background-clip: text 必须配齐四行才出效果
只写 background: linear-gradient() 和 background-clip: text，在 Safari、Chrome 移动端、甚至新版 Firefox 里都会退成纯黑或纯灰文字。必须同时满足：
-
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);——方向统一用角度（90deg比to right更稳） -
-webkit-background-clip: text;——Safari / iOS Chrome 强制依赖，缺它直接失效 -
background-clip: text;——标准属性，但不能单独靠它 -
-webkit-text-fill-color: transparent;——比color: transparent更可靠；某些 Android WebView 下后者完全不透
漏掉任意一项，渐变就挂了。别信“只加前缀就行”或“标准属性已覆盖”的旧经验。
元素必须有盒模型，inline 元素默认不支持
span、a 这类默认 display: inline 的标签，即使写了上面四行，background-clip: text 也会被浏览器跳过。解决方法只有两个：
- 加
display: inline-block;（推荐，不破坏文档流） - 或
display: block;（适合标题类独占行元素）
伪元素（如 ::before）还要额外加 content: ""，否则根本没渲染节点。如果父容器设了 overflow: hidden，且文字边缘刚好被裁切，渐变也会消失——不是 bug，是裁剪逻辑生效了。
移动端滚动卡顿？先停掉 background-position 动画
iOS Safari 滚动时会对含 background-position 或 background-size 的渐变文字反复光栅化，轻则掉帧，重则闪白。真要流动效果，换这条路：
- 用
filter: hue-rotate(0deg);配合@keyframes动画，GPU 加速更稳 - 渐变色标别超 3 个：
linear-gradient(90deg, #f00, #0f0, #00f)比五色停靠点快 40%+ - 禁用
repeating-linear-gradient——Safari 会随机截断文字
最常被忽略的是：父容器若有背景色，必须显式写 background-color: transparent，否则它会盖住渐变层，你以为是渐变失效，其实是被挡住了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
