必须将渐变中可变部分（如颜色、角度）单独定义为css变量，而非整个linear-gradient()函数；正确做法是：:root{--color-start:#4facfe;--color-end:#00f2fe;--gradient:linear-gradient(135deg,var(--color-start),var(--color-end))}。
不能把整个 linear-gradient() 赋给一个 CSS 变量，否则它就失去动态调整能力。 想复用、想换色、想响应主题切换？必须把渐变里「可变的部分」单独抽成变量，比如起始色、终止色、中间停点——而不是把整条函数塞进去。
为什么 --gradient-primary: linear-gradient(135deg, #4facfe, #00f2fe) 是错的
这种写法让变量变成“死字符串”，改个起始色就得重写整条声明，无法被 JavaScript 动态修改，也无法在 :root 里用 var(--color-start) 替换其中某一段。浏览器不支持在 linear-gradient() 内部对变量做语法插值（即不能 linear-gradient(var(--angle), var(--start), var(--end)) 这样直接用）。
- 真正能生效的是：把颜色值本身定义为变量，再在渐变中显式调用
var(--color-start) - 角度、方向、形状等参数可以硬编码，也可以另设变量（如
--gradient-angle: 135deg），但要确保它们被实际用到 - 如果你用 Tailwind，
from-*/to-*类已经帮你做了这层分离，但自定义色板时仍需保持同构逻辑
怎么用 --color-start 和 --color-end 构建语义化梯度
核心是让每个品牌梯度只依赖一组语义化颜色变量，而非具体十六进制值。例如：
:root {
--color-primary-start: oklch(0.62 0.18 250);
--color-primary-end: oklch(0.52 0.22 200);
--gradient-primary: linear-gradient(135deg, var(--color-primary-start), var(--color-primary-end));
}
- 所有按钮、卡片、标题的主渐变都用
background-image: var(--gradient-primary) - 换主题时只需改
--color-primary-start和--color-primary-end，整个项目自动更新 - 务必配
fallback：旧版浏览器不认识oklch()，得加一行color: hsl(218 32% 47%)之类 - 避免在多个选择器里重复写
linear-gradient(...)，那等于放弃变量管理的意义
如何兼容旧浏览器又不牺牲语义性
CSS 变量本身兼容性很好（IE 不支持，其余现代浏览器全支持），但 oklch()、conic-gradient() 等新函数不行。关键不是“能不能用”，而是“怎么降级不影响结构”。
- 用
@supports区分：先写 HSLA fallback，再用@supports (color: oklch(0 0 0))覆盖新色值 - 渐变方向别依赖角度变量（如
var(--angle)），因为部分浏览器不支持在linear-gradient()中解析变量角度；固定写135deg或to-br更稳妥 - 如果要用圆锥或径向渐变作语义化组件（如加载环、状态指示器），单独抽成
--gradient-ring变量，但不要和线性渐变混在同一组变量体系里 - Tailwind 用户注意：
bg-gradient-to-r类不能和自定义--gradient-primary直接共存；要么全用工具类，要么全用自定义变量 +background-image
最常被忽略的一点：渐变变量必须配合有尺寸的容器才可见。哪怕你定义得再精准，height: 0 或 padding: 0 且无内容的元素，照样什么也看不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
