box-shadow 本身不响应系统主题切换，需通过 :root 中定义带透明度的 css 变量，并在 @media (prefers-color-scheme: dark) 或 [data-theme="dark"] 中重设变量值来实现主题适配；关键在于只抽离颜色部分、使用 rgba/hsla、提供 fallback、避免整条阴影塞入变量。
直接用 box-shadow 引用 CSS 变量就能实现跟随系统主题的阴影，但必须确保变量在 :root 中定义、颜色值支持透明度、且 fallback 机制到位——否则深色模式下阴影会消失或变黑成一块。
为什么 box-shadow 无法直接响应系统主题切换
浏览器本身不把 box-shadow 当作“颜色类属性”来监听系统变化；它只认你写的死值或 var()。真正起作用的是：你在 [data-theme="dark"] 或 @media (prefers-color-scheme: dark) 里重设了变量值，box-shadow 因为依赖该变量，才被动更新。
常见错误现象：
- 写了
@media (prefers-color-scheme: dark) { :root { --shadow-color: #000; } }，但没加!important或覆盖逻辑错位，导致变量没生效 - 变量值是纯色如
#000，在深色背景下阴影“看不见”，实际需要rgba(0, 0, 0, 0.15)这类带 alpha 的值 - 在组件内部（比如
.card { --shadow-color: ... }）重定义变量，结果box-shadow拿到的是局部作用域值，和主题无关
如何正确定义可切换的阴影变量
推荐在 :root 中统一声明语义化变量，并为浅/深色模式分别提供带透明度的颜色值：
:root {
--shadow-sm: 0 1px 2px var(--shadow-color-sm, rgba(0, 0, 0, 0.08));
--shadow-md: 0 4px 6px -1px var(--shadow-color-md, rgba(0, 0, 0, 0.1)), 0 2px 4px -1px var(--shadow-color-md, rgba(0, 0, 0, 0.06));
--shadow-lg: 0 10px 15px -3px var(--shadow-color-lg, rgba(0, 0, 0, 0.1)), 0 4px 6px -2px var(--shadow-color-lg, rgba(0, 0, 0, 0.05));
<p>/<em> 主题基础色 </em>/
--shadow-color-sm: rgba(0, 0, 0, 0.08);
--shadow-color-md: rgba(0, 0, 0, 0.1);
--shadow-color-lg: rgba(0, 0, 0, 0.1);
}</p><p>@media (prefers-color-scheme: dark) {
:root {
--shadow-color-sm: rgba(255, 255, 255, 0.05);
--shadow-color-md: rgba(255, 255, 255, 0.08);
--shadow-color-lg: rgba(255, 255, 255, 0.1);
}
}</p><p>/<em> 或配合 data-theme 属性（JS 切换更可控） </em>/
[data-theme="dark"] {
--shadow-color-sm: rgba(255, 255, 255, 0.05);
--shadow-color-md: rgba(255, 255, 255, 0.08);
--shadow-color-lg: rgba(255, 255, 255, 0.1);
}</p>
关键点：
- 变量名用
--shadow-color-xxx而非--shadow-xxx，便于后续单独调整颜色而不动偏移/模糊参数 - 所有值必须含 alpha（
rgba或hsla），硬写#000在暗色背景上等于无阴影 - fallback 值（如
var(--shadow-color-md, rgba(0,0,0,0.1))）不是可选，而是防止 JS 未加载或变量未定义时样式崩溃
在组件中安全使用 var() 配合 box-shadow
不要把整条 box-shadow 值都塞进一个变量里（比如 --shadow-lg: "0 10px 15px -3px rgba(0,0,0,0.1)"），那样无法单独微调颜色，也容易因引号/空格导致解析失败。
正确做法是只抽离颜色部分，其他参数保持静态：
.card {
box-shadow: var(--shadow-lg);
}
<p>.btn {
box-shadow: 0 2px 4px -1px var(--shadow-color-sm),
0 1px 2px -1px var(--shadow-color-sm, rgba(0, 0, 0, 0.06));
}</p>
注意：
-
box-shadow支持多层阴影，每层都可以独立用var()，别怕写长 - 避免在
var()外再套函数（如color-mix(in srgb, var(--shadow-color), white)），目前浏览器兼容性差 - 若需适配极旧浏览器（IE），
box-shadow本身不支持变量，fallback 值必须是完整可用的 CSS 值
filter: drop-shadow() 和 box-shadow 的取舍
drop-shadow() 是 filter 函数，能绕过元素形状裁剪（比如带 border-radius 和 overflow: hidden 的卡片），但它不接受变量——CSS 函数里不能嵌 var()。
所以如果你需要：
- 严格跟随主题色 + 精确控制每层阴影 → 用
box-shadow+ CSS 变量 - 贴合不规则轮廓（如剪切路径、SVG 容器）+ 不介意颜色固定 → 用
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)) - 既要贴形又要换色 → 目前无完美方案，只能 JS 动态改
style.filter字符串，或预设多套 class
最易被忽略的一点：阴影的「视觉重量」在深色模式下要明显减轻。同样的 rgba(0,0,0,0.2) 在白底上柔和，在黑底上就是突兀的灰斑——必须手动调低 alpha，而不是复用同一套数值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
