纯 css 无法直接用变量驱动 linear-gradient() 参数，因浏览器不解析 var() 为有效值；应改用 hsl()/color-mix() 动态生成颜色，或用变量控制 animation、background-size 等支持动态计算的属性。
纯 CSS 实现文字渐变流动动效，用变量（--grad-colors、--grad-angle 等）能提升维护性，但要注意：CSS 自定义属性不能直接插入 linear-gradient() 函数参数中 —— 浏览器不解析变量值为颜色列表或角度数值，除非你用 hsl() 或 color-mix() 等可计算函数间接驱动。
为什么直接写 linear-gradient(var(--grad-angle), var(--c1), var(--c2)) 不生效
CSS 变量在 linear-gradient() 内部不会被展开为有效语法。浏览器解析时会把 var(--grad-angle) 当作无效值，整条声明被丢弃，退回到默认文字色或透明状态，导致文字消失或无渐变。
-
background: linear-gradient(var(--angle), #ff0080, #00c2ff);→ 渐变失效，背景回退为 transparent - DevTools 中该行显示为 strike-through，控制台无报错，但效果不可见
- 即使
--angle: 90deg已正确定义，也无法参与函数计算
可行的变量驱动方案：用 hsl() 或 color-mix() 动态生成颜色
真正能被变量驱动的是颜色本身，而非渐变函数结构。例如用 hsl() 绑定色相变量，再配合 @keyframes 动画改变 --hue，让整个渐变“旋转”起来：
:root {
--hue: 200;
--sat: 100%;
--light: 60%;
}
.gradient-text {
background: linear-gradient(
90deg,
hsl(var(--hue), var(--sat), var(--light)),
hsl(calc(var(--hue) + 120), var(--sat), var(--light)),
hsl(calc(var(--hue) + 240), var(--sat), var(--light))
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-size: 200% 100%;
animation: rotateHue 8s ease-in-out infinite;
}
@keyframes rotateHue {
0% { --hue: 200; }
100% { --hue: 380; }
}
注意：calc() 在 hsl() 内部是允许的，且会被实时计算；但必须确保单位一致（如 deg 要显式写出）、数值不越界（hsl(400, ...) 会自动模 360）。
更稳妥的变量用法：控制动画节奏与尺寸，而非渐变结构
把变量用在真正支持动态计算的位置，比如 animation-duration、background-size、background-position，既安全又灵活：
-
--anim-duration: 4s;→ 用在animation: shift var(--anim-duration) ease-in-out infinite; -
--bg-size: 300% 100%;→background-size: var(--bg-size);，扩大背景范围让位移动画更平滑 -
--pos-start: 0% 50%;和--pos-end: 100% 50%;→ 配合@keyframes中的background-position关键帧（需注意：变量不能直接写进@keyframes块内，但可通过外部 class 切换预设值）
例如用 class 切换不同速度档位：.gradient-text.slow { --anim-duration: 6s; }，比硬编码更易维护。
多行文字 + 变量适配的隐藏坑：background-clip: text 不支持换行裁剪
即使你用 var(--line-height) 控制行高，background-clip: text 仍只对单行文本做精确裁剪；多行时渐变背景可能错位、断裂或上下偏移。这不是变量问题，而是底层渲染限制。
- 解决办法：给容器加
display: inline-block+line-height: 1，并确保white-space: normal - 更可靠的方式是放弃多行渐变文字，改用伪元素叠加（
::before覆盖渐变层 +mix-blend-mode: multiply），此时变量可自由控制伪元素的background和animation - 别指望
var(--multi-line-grad)一键搞定 —— 没有这种魔法变量
变量能帮你管住节奏、颜色倾向和响应式尺寸，但无法绕过 background-clip: text 的渲染边界和 linear-gradient() 的静态解析规则。真要动态重构渐变结构，得上 JS 注入 style 或 CSS Houdini —— 那就不是纯 CSS 范畴了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
