css变量不能直接存整个linear-gradient函数值，必须拆解为角度、颜色、停点等独立变量再组合使用，否则var(--full-gradient)在background-image中因语法错误失效。
直接用 CSS 变量定义整个 linear-gradient() 值是无效的，必须把色标（color stops）拆成独立变量再组合进函数里——否则改个颜色就得重写整条渐变声明，失去动态意义。
为什么 var(--gradient-primary) 在 background-image 里不生效
CSS 变量不能“嵌套在字符串里”被解析。像这样写会失败：
.btn {
--gradient-primary: linear-gradient(135deg, #667eea, #764ba2);
background-image: var(--gradient-primary);
}
浏览器会因语法错误 fallback 到无背景或纯色。根本原因是 var() 必须出现在函数参数位置，而 background-image 的值是一个完整函数调用，不是参数容器。
- 正确位置示例：
linear-gradient(135deg, var(--color-start), var(--color-end)) - 错误位置示例：
var(--full-gradient)作为整个函数值 - 连 JS 拼接后塞进
style.backgroundImage也无效——CSS 引擎不解析运行时拼接的字符串
如何用多个变量控制色标位置和颜色
要实现“可调角度 + 可调起止色 + 可调停点百分比”，就得拆解每个可变维度：
- 定义方向：
--gradient-angle: 135deg - 定义颜色：
--color-start: #667eea、--color-mid: #9a6eeb、--color-end: #764ba2 - 定义停点：
--stop-start: 0%、--stop-mid: 50%、--stop-end: 100%
然后组合使用：
.header {
background-image: linear-gradient(
var(--gradient-angle),
var(--color-start) var(--stop-start),
var(--color-mid) var(--stop-mid),
var(--color-end) var(--stop-end)
);
}
注意：停点必须带单位（% 或 px），否则会被忽略；所有变量都需在作用域内已声明，且不能依赖未定义变量链式引用。
AWPortrait-Z 这类 WebUI 主题中怎么安全覆盖渐变
AWPortrait-Z 默认标题栏用了 linear-gradient(135deg, #667eea 0%, #764ba2 100%)，直接覆盖整个样式容易破坏响应式或暗色模式适配。更稳妥的做法是：
- 只覆盖
:root中的底层颜色变量，比如--color-primary-start和--color-primary-end - 确保组件级选择器优先级足够（如加
!important或用更具体路径.title-bar > h1） - 避免在
:root里塞一堆只用于单个模块的变量，按功能分组声明，例如：--awp-title-gradient-start、--awp-btn-gradient-angle - 测试暗色模式下是否自动继承——很多主题靠
@media (prefers-color-scheme: dark)重设变量，你覆盖的变量也要同步处理
真正难的不是写对语法，而是让多变量组合在不同组件、不同主题模式、不同缩放层级下仍保持语义清晰和可维护——变量名一旦模糊，三个月后你自己都得查 git log 才能搞清 --c2 到底是哪个停点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
