应使用按视觉角色分层命名的 css 自定义属性（如 --shadow-card-hover）统一管理多重阴影，定义在 :root 下，每变量为单层完整阴影值；inset 阴影须置于 box-shadow 列表末尾以确保层级正确；响应式需将 clamp() 等函数放在使用处而非变量中。
用 CSS 自定义属性统一管理多重阴影参数
直接把 box-shadow 值硬写死在每个选择器里，改颜色或模糊值时得全局搜索替换，一漏就错。用 CSS 自定义属性（--shadow-1、--shadow-2 等）抽离可复用的阴影片段，才能真正实现“改一处、全更新”。
关键不是堆变量，而是按视觉角色分层命名，比如：--shadow-card-hover 表示卡片悬停态的完整阴影串，--shadow-focus 专用于焦点状态——这样别人读代码一眼就知道用途，而不是猜 --s1 到底是哪一层。
- 所有自定义属性必须定义在
:root或某个明确的作用域选择器下，否则无法继承 - 每个变量值应为完整的单层阴影（如
0 2px 6px -2px rgba(0,0,0,0.15)），不要拼接多层，避免运行时字符串拼接 - 多层阴影仍需靠逗号手动组合：比如
box-shadow: var(--shadow-base), var(--shadow-hover); - 别在变量里写
inset关键字以外的语法糖（如省略 color），浏览器不会自动补默认值
为什么 var(--shadow) 在 inset 混用时容易失效
常见错误是把带 inset 的整条阴影塞进一个变量，然后和其他外阴影混写：box-shadow: var(--shadow-out), var(--shadow-inset); ——看似合理，但一旦 --shadow-inset 定义为 inset 0 1px 2px rgba(255,255,255,0.8)，它就会被渲染在最底层，高光效果完全看不见。
根本原因是：浏览器按你写的顺序绘制，而 inset 阴影默认层级低于所有外阴影。要让它“浮起来”，必须确保它出现在逗号列表的最后一位。
- 正确做法：把
inset阴影变量放在box-shadow值的末尾，例如box-shadow: var(--shadow-depth), var(--shadow-inset); - 不能依赖变量顺序自动调整渲染层，CSS 变量只是文本替换，不改变语义优先级
- 如果需要动态切换 inset/outer，建议拆成两个独立变量 +
@media或 JS 切类名控制，别试图用 calc() 或条件函数绕开
响应式阴影适配中 clamp() 和自定义属性的配合陷阱
移动端阴影太重会抢内容，PC 端太淡又没立体感。用 clamp(4px, 2vmin, 12px) 控制 blur 或 v-offset 是好思路，但直接塞进自定义属性会失败——因为 clamp() 是函数，不能当纯字符串存进 --shadow 变量里。
可行方案是把可变部分单独抽成变量，再在使用处组合：
code:root {
--shadow-blur: clamp(4px, 2vmin, 12px);
--shadow-color: rgba(0, 0, 0, 0.12);
}
.card {
box-shadow: 0 calc(var(--shadow-blur) * 2) var(--shadow-blur) var(--shadow-color);
}
-
calc()必须在使用位置调用，不能提前算好存进变量（CSS 不支持变量内嵌 calc） -
vmin单位在折叠屏或分屏模式下可能突变，建议加max()保底，如max(4px, clamp(4px, 2vmin, 12px)) - Android Chrome 119+ 才稳定支持
clamp()在box-shadow中的计算，旧版本需降级为媒体查询
调试多重阴影时哪些值最容易被忽略
写完一堆 var() 看不出效果？八成是这几个地方卡住了：
- 浏览器开发者工具里查不到变量值：确认该元素是否继承了定义变量的祖先（
:root最安全） - 阴影突然全没了：检查是否误写了
box-shadow: none覆盖了变量，CSS 层叠优先级高于变量 - 颜色变黑或透明：
rgba()里的 alpha 值被多次叠加（比如变量里带 0.1，又在外层再乘 0.9），建议所有变量统一用 0.05–0.15 区间，靠层数叠加浓度 - hover 动画闪烁：
transition: box-shadow时，变量变化触发重排，若两层阴影的blur值跨度过大（如 4px → 24px），低端机易掉帧，建议用will-change: box-shadow提前告知渲染引擎
最麻烦的其实是 spread 值的负数精度——-1.5px 在某些缩放比例下会四舍五入成 -2px 或 -1px，导致边缘收不紧。真要精细控制，不如放弃 spread，改用两层小偏移阴影模拟收紧效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
