深色模式下阴影不能复用浅色值，因黑底黑影对比度低致层次难辨；需用css变量统一管理并配合媒体查询切换颜色、模糊和偏移值，且须设color-scheme声明。
深色模式下阴影为什么不能直接复用浅色值
直接把 box-shadow: 0 2px 8px rgba(0,0,0,0.15) 拿到深色背景上，会立刻显得脏、糊、发灰——因为黑底+黑影的对比度太低，人眼无法分辨层次，系统也不会自动帮你换色。CSS 的 box-shadow 颜色是静态值，不继承 color，也不响应 @media (prefers-color-scheme: dark) 的“懒加载”行为。
用 CSS 变量统一管理阴影参数
把所有可变部分抽成变量，比如偏移、模糊、颜色，只在 :root 下定义一次，再用媒体查询覆盖：
code:root {
--shadow-offset-y: 2px;
--shadow-blur: 8px;
--shadow-color: rgba(0, 0, 0, 0.15);
}
@media (prefers-color-scheme: dark) {
:root {
--shadow-color: rgba(255, 255, 255, 0.06);
}
}
.card {
box-shadow: 0 var(--shadow-offset-y) var(--shadow-blur) var(--shadow-color);
}
- 别漏写
color-scheme: light dark在:root上，Safari 否则不触发媒体查询 -
--shadow-color必须用rgba()，硬写#fff或white会导致暗色下完全不可见 - 深色模式下透明度要更低（
0.04–0.08），否则容易过曝或泛白
避免 drop-shadow() 在暗色模式下出问题
filter: drop-shadow() 基于 Alpha 通道生成阴影，不感知背景明暗，所以在深色背景下常出现边缘“发光晕”，尤其对圆角/半透元素。它还受 Safari 缓存机制影响，切模式后可能延迟重绘。
- 优先用
box-shadow替代drop-shadow()—— 更可控、性能更好、能配合变量 - 若必须用
drop-shadow()（如 SVG 图标跟随形状），暗色下需手动调低透明度和模糊值：drop-shadow(0 1px 1px rgba(255,255,255,0.04)) - 强制重绘可加
transform: translateZ(0)，但别滥用，尤其在滚动区域里
高对比度模式（HC）下阴影会被系统剥离
Windows 高对比度或 macOS “增加对比度”开启时，浏览器会主动忽略所有 box-shadow 和 filter 效果——这是 WCAG 合规要求，不是 bug。
- 别依赖阴影表达层级或状态，改用边框、间距、背景色差等可访问方式
- 用
@media (forced-colors: active)做兜底：box-shadow: none; border: 2px solid CanvasText; - 测试必须真机开启 HC 模式（非仅靠开发者工具模拟），否则看不到真实表现
blur-radius 和 offset-y。真实光源在暗环境中投射更收敛，0 1px 4px 比 0 2px 8px 更可信。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
