不能把整个 linear-gradient() 塞进一个 css 变量里复用，必须将颜色停点（如--color-start、--stop-1）拆为独立变量，在linear-gradient()中用var()调用；否则浏览器语法校验失败，background-image降级为none或fallback色。
不能把整个 linear-gradient() 塞进一个 CSS 变量里去“复用”，必须把颜色停点（color stops）单独抽成变量，再在函数中用 var() 调用——否则改个色就得重写整条声明，根本谈不上配置。
为什么 var(--gradient-full) 在 background-image 里不生效
浏览器解析 background-image: linear-gradient(...) 时，会先做语法校验，再展开变量。而 var(--gradient-full) 是一个字符串值，不是合法的函数调用结构，直接被判定为无效，降级成无背景或 fallback 色。
- 错误写法：
--gradient-full: linear-gradient(135deg, #667eea, #764ba2); background-image: var(--gradient-full); - 正确思路：只让变量承载「可变部分」，比如
--color-start、--stop-1这类原子值 - 调试时看开发者工具的 Computed 面板，如果
background-image显示为none或单色，基本就是这个原因
怎么拆解多停点渐变并用变量控制每个位置
三个及以上颜色停点时，位置信息（0%、50%、100%）和颜色必须一一对应，且每个停点都要显式带单位；变量名要清晰区分语义，避免混用。
- 定义变量示例：
--color-a: #667eea; --color-b: #9a6eeb; --color-c: #764ba2; --stop-a: 0%; --stop-b: 50%; --stop-c: 100%; - 组合使用：
background-image: linear-gradient(135deg, var(--color-a) var(--stop-a), var(--color-b) var(--stop-b), var(--color-c) var(--stop-c)); - 停点单位不能省：写成
var(--stop-a)却没给变量赋值带%或px，浏览器会忽略该停点 - 别用变量链式引用：
--stop-b: calc(var(--stop-a) + 50%)在大多数浏览器里不支持，会失效
如何安全覆盖第三方组件（如 AWPortrait-Z）里的渐变色
直接重写组件的 background-image 容易破坏暗色模式适配或响应式逻辑；优先修改其底层颜色变量，保持结构一致。
- 查文档或源码，确认它依赖哪些变量，比如
--awp-title-start和--awp-title-end - 在你自己的
:root或更高优先级选择器里覆盖：:root { --awp-title-start: #2563eb; --awp-title-end: #1d4ed8; } - 如果组件用了
@media (prefers-color-scheme: dark)，你也得同步覆盖深色变量，否则切换模式后颜色错乱 - 避免用
!important强盖样式，容易引发维护冲突；优先走变量覆盖路径
真正难的不是写出渐变，而是让每个停点都可独立调整、可被媒体查询切换、还能在多个组件间共享又互不干扰——这要求变量命名有模块意识，作用域收得紧，且所有停点单位必须显式声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
