阴影需用CSS变量配合prefers-color-scheme适配明暗模式，drop-shadow()在暗色下易过曝应慎用，高对比度模式下阴影会被系统剥离，移动端应使用vmin或clamp()控制扩散以适配DPR和缩放。
阴影颜色别硬写死，用 color-scheme 触发自动切换
系统级暗色模式切换时，box-shadow 里的颜色不会自动变——它不是继承色，也不响应 prefers-color-scheme 媒体查询的“懒加载”行为。直接写 box-shadow: 0 2px 8px #0003，在深色背景上会糊成一团灰黑，对比度崩坏。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把阴影色从固定值改成 CSS 自定义属性，例如
--shadow-color: rgba(0, 0, 0, 0.15) - 用
@media (prefers-color-scheme: dark)覆盖该变量：:root { --shadow-color: rgba(255, 255, 255, 0.08); } - 确保根元素有
color-scheme: light dark声明，否则部分浏览器（如 Safari）可能不触发媒体查询响应
filter: drop-shadow() 在暗色模式下容易过曝
drop-shadow() 是滤镜，它基于元素内容的 Alpha 通道生成阴影，不区分背景明暗——结果就是在深色背景下，阴影边缘常出现不自然的“泛白光晕”，尤其对带圆角或透明边的组件。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
box-shadow替代drop-shadow()，前者可控性强、性能好、且能配合变量做明暗适配 - 若必须用
drop-shadow()（比如要跟随 SVG 形状），需手动降低暗色模式下的模糊值和透明度：filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1))→ 暗色下改用rgba(255,255,255,0.05) - 注意：Safari 对
drop-shadow()的暗色渲染有缓存延迟，切模式后可能需要强制重绘（如 toggletransform: translateZ(0)）
高对比度模式下阴影可能被系统完全剥离
Windows 高对比度模式（HC）或 macOS 的“增加对比度”开关启用时，多数浏览器会忽略所有 box-shadow 和 filter 效果——这不是 bug，是 WCAG 合规性策略：阴影属于非语义装饰，会被主动禁用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别依赖阴影传递层级或状态信息；用边框、间距、背景色差等可访问方式替代视觉层级
- 用
@media (forced-colors: active)检测并兜底：box-shadow: none; border: 2px solid CanvasText; - 测试时别只看模拟器——真实开启 Windows HC 模式（设置 > 辅助功能 > 高对比度）才能复现剥离行为
阴影扩散半径在移动端缩放时容易失真
用固定像素值（如 box-shadow: 0 4px 12px ...）在高 DPR 屏幕（如 iPhone 14 Pro）上会显得过重；而用 rem 或 em 又受字体缩放影响，用户调大系统字号时阴影可能突然膨胀。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
vw或vmin控制扩散范围，例如box-shadow: 0 0.15vmin 0.4vmin var(--shadow-color) - 避免在
@media (max-width: 768px)里单独调阴影参数——响应式应基于视口而非设备断点 - 如果项目已用 CSS clamp()，可这样写：
box-shadow: 0 0.1rem clamp(0.1rem, 0.15vmin, 0.25rem) var(--shadow-color)
真正麻烦的是三者叠加：暗色模式 + 高对比度 + 高 DPR。这时候阴影要么消失，要么过曝，要么尺寸错乱——没有一劳永逸的写法，得靠 @media 嵌套 + 变量覆盖 + 真机验证来一层层压平。
