css变量无法存储完整函数调用，故var(--full-gradient)在background-image中会因语法错误回退；多重渐变需拆解为独立参数变量（如--grad1-angle、--grad1-start等），逐层拼接并显式声明透明色与单位，确保每层变量已定义且顺序对应堆叠层级。
为什么不能直接用 var(--full-gradient) 做多重渐变
CSS 变量无法存储完整函数调用，var(--full-gradient) 在 background-image 中会因语法错误 fallback 到无背景或纯色。浏览器解析时把整个字符串当作文本值，而不是可执行的 CSS 函数——哪怕你写的是 linear-gradient(...), linear-gradient(...)，它也只被当作一个普通字符串，不参与语法树构建。
linear-gradient() 里怎么安全用变量控制多层叠加
多重渐变必须拆解为独立可变维度，再逐层拼进同一个 background 或 background-image 声明中。关键不是“存渐变”，而是“存参数”。
- 每层渐变的方向、颜色、停点都得单独声明变量，例如：
--grad1-angle: 45deg、--grad1-start: #ff6b6b、--grad1-stop: 0% - 多层之间用逗号分隔，顺序即堆叠顺序：先写的在上层，后写的在底层
- 透明色（如
rgba(255,255,255,0.1)）必须显式写出，不能靠变量间接引用，否则容易因单位缺失或 alpha 未定义导致渲染失败 - 所有变量必须在作用域内已声明；若某层依赖未定义变量（比如
var(--grad2-end)没设），整条background声明会失效
如何用变量组合出「斜纹+主色」这类双层渐变
典型场景：一层细密斜线纹理 + 一层底色渐变。不能把两层打包成一个变量，但可以分层控制。
- 第一层（纹理）：
--stripe-angle: 45deg、--stripe-color: rgba(255,255,255,0.1)、--stripe-size: 20px - 第二层（主色）：
--main-start: #ff7e5f、--main-end: #feb47b - 组合写法：
background: linear-gradient(var(--stripe-angle), transparent 25%, var(--stripe-color) 25%), linear-gradient(to bottom, var(--main-start), var(--main-end)) - 别忘了配
background-size: var(--stripe-size) var(--stripe-size), cover—— 多层背景的background-size也需按顺序一一对应
容易被忽略的兼容性与降级陷阱
不是所有浏览器都支持多层渐变中混用变量和透明度，尤其旧版 Safari 和部分安卓 WebView。
- 如果某层用了
var(--alpha)拼接rgba(0,0,0,var(--alpha))，而--alpha是数字（如0.3），某些引擎会拒绝解析——必须写成带小数点的完整浮点值，且不能省略前导零 - 层级过多（≥3 层）且铺满视口时，在低端设备上可能触发合成层溢出，表现为滚动卡顿或内存告警；建议用
will-change: background谨慎优化，而非盲目叠加 - 深色模式切换时，仅靠
@media (prefers-color-scheme: dark)覆盖变量不够——要确保每层渐变里的每个变量都被重新赋值，否则某一层可能残留亮色导致违和
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
