如何在CSS变量中存储多参数的Box-shadow阴影值？-css教程-PHP中文网

单个--shadow变量存多层box-shadow可行但需加引号并严格格式；拆解为多个语义变量（如--shadow-x、--shadow-blur）再拼接更可维护；语义化命名（如--shadow-card）是轻量折中方案。

如何在css变量中存储多参数的box-shadow阴影值？

直接用单个 --shadow 变量存多层 box-shadow 值是可行的，但必须加引号、严格控制空格和逗号格式，否则浏览器只取前半截；拆成多个语义变量（如 --shadow-x、--shadow-blur）再拼接，才是长期可维护的选择。

单个变量存多层阴影：引号和空格必须精确

浏览器把 CSS 自定义属性当纯字符串容器，不解析语法。所以这行会失败：

:root { --shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.2); }

实际只生效 0 2px 4px rgba(0,0,0,0.1)，后面全被截断。正确写法是：

给整个值加双引号或单引号：--shadow: "0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.2)";
引用时仍需显式调用：box-shadow: var(--shadow);，不能漏掉 var()
引号内每层之间必须是英文逗号 + 一个空格：, ，多空格或无空格都会导致整条声明无效
fallback 推荐加上：box-shadow: var(--shadow, 0 2px 4px rgba(0,0,0,.1));，避免变量未定义时阴影消失

多变量拆解拼接：适合主题切换和 JS 动态修改

当你需要独立控制某一层的模糊半径（比如深色模式下调小第二层）、或用 JavaScript 修改颜色时，硬拼字符串很快失控。拆解后组合更清晰：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

:root {
  --shadow-x: 0;
  --shadow-y: 2px;
  --shadow-blur: 4px;
  --shadow-color: rgba(0,0,0,0.1);
  --shadow-x-2: 0;
  --shadow-y-2: 8px;
  --shadow-blur-2: 16px;
  --shadow-color-2: rgba(0,0,0,0.2);
}
.card {
  box-shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-color),
              var(--shadow-x-2) var(--shadow-y-2) var(--shadow-blur-2) var(--shadow-color-2);
}

注意点：

每个 var() 后必须有空格分隔参数，不能连写：var(--x)var(--y) 是错的，必须是 var(--x) var(--y)
CSS 不支持字符串拼接，calc(var(--x) + "px") 无效，所有单位要随变量一起定义好
如果某层完全不需要（比如临时禁用第二层），设 --shadow-x-2: 0 并保持其他参数合法即可，不要留空值

按语义命名变量：比参数拆解更轻量的折中方案

多数项目不需要逐参数控制，而是按用途区分阴影类型。这时直接用语义化变量最省事：

:root {
  --shadow-card: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.06);
  --shadow-input-focus: 0 0 0 2px rgba(0,100,255,0.2);
}
.card { box-shadow: var(--shadow-card); }
input:focus { box-shadow: var(--shadow-input-focus); }

这种写法的优势：