CSS自定义属性无法批量替换多层box-shadow，因浏览器将逗号分隔的多层阴影视为整体字符串且不支持解构，必须为每层参数单独设变量或按视觉角色定义完整单层值。
不能靠单个变量批量替换多层 box-shadow，必须为每层的每个可调参数单独设变量，或按视觉角色定义完整单层值。
为什么 var(--shadow) 直接塞多层阴影会失效
浏览器把逗号分隔的多层 box-shadow 当作一个整体字符串值，而 CSS 自定义属性不支持“解构”——它只能做纯文本替换。一旦你写成：
/* ❌ 无效：整个声明被忽略 */
.shadow {
--shadow-layers: "0 2px 6px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.08)";
box-shadow: var(--shadow-layers);
}浏览器无法解析引号内的内容为合法阴影语法，直接丢弃整条规则。
-
inset关键字不能由变量注入，必须硬写在某一层末尾 - 省略中间参数（如只写
0 2px rgba(0,0,0,0.1)）会导致后续参数错位 - RGBA 中的 alpha 值建议单独抽成
--shadow-alpha，方便统一调控透明度
用 5 个变量支撑两层常用阴影组合
典型卡片悬浮需要近距锐利层 + 远距环境层。用以下变量即可覆盖全部调节维度，且保持语义清晰：
立即学习“前端免费学习笔记（深入）”；
:root {
--shadow-h: 0;
--shadow-v-near: 2px;
--shadow-v-far: 8px;
--shadow-blur-near: 6px;
--shadow-blur-far: 24px;
--shadow-spread-near: -2px;
--shadow-spread-far: 0;
--shadow-alpha: 0.12;
}
<p>.card {
box-shadow:
var(--shadow-h) var(--shadow-v-near) var(--shadow-blur-near) var(--shadow-spread-near) rgba(0, 0, 0, var(--shadow-alpha)),
var(--shadow-h) var(--shadow-v-far) var(--shadow-blur-far) var(--shadow-spread-far) rgba(0, 0, 0, calc(var(--shadow-alpha) * 0.7));
}-
calc()可用于 alpha 运算，但不能用于px单位（如calc(--shadow-blur-near * 2)无效） - 负
spread（如-2px）必须显式写出，变量里不能只存正数再靠calc加负号 - 两层足够，三层以上在动画或滚动中易掉帧，尤其 Android 低端机
按视觉角色命名变量，比按层数命名更可靠
别用 --shadow-1、--shadow-2 这类无意义编号。改用描述用途的名称：
:root {
--shadow-card-hover: 0 2px 6px -2px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.08);
--shadow-focus: 0 0 0 3px rgba(0, 120, 255, 0.3);
--shadow-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
<p>.button:focus {
box-shadow: var(--shadow-focus), var(--shadow-inset-highlight);
}-
inset阴影必须放在box-shadow值的最末位，否则会被外阴影盖住 - 所有变量必须定义在
:root或明确作用域下，否则子元素无法继承 - 每个变量值应为**完整的单层阴影字符串**，不要试图拼接多层
JavaScript 动态更新时只改变量，别碰 style.boxShadow
直接拼字符串赋值给 element.style.boxShadow 极易出错，尤其带空格、逗号、括号时。正确做法是只更新 CSS 变量：
document.documentElement.style.setProperty('--shadow-alpha', '0.2');
// 浏览器自动重算所有引用该变量的 box-shadow- 避免在 JS 中重复维护阴影结构逻辑，交给 CSS 引擎处理
- 想切换
inset状态？别用变量控制关键字，而是切类名：.card.is-pressed { --shadow-mode: inset; }+ 对应 CSS 规则 - 响应式缩放别依赖
transform: scale()，它不会缩放box-shadow的像素值；改用clamp()或rem单位定义变量
真正难的不是写多少变量，而是决定哪几层阴影承担什么视觉任务、谁在前谁在后、谁负责近距细节谁负责远距氛围——这些判断一旦定错，再多变量也救不回层次感。
