浅色阴影需用带色相的浅灰rgba（如rgba(30,30,40,0.06)）替代纯黑低透明，搭配适中模糊（如8px）与小偏移；深色模式须改用高alpha白灰变量，并避免多层box-shadow以防性能问题。
用 box-shadow 配合 rgba() 控制阴影透明度
浅色阴影本质是低饱和、低对比、高透明的投影，直接用 box-shadow 的颜色值写 rgba(0, 0, 0, 0.05) 这类低 alpha 值就能实现，但要注意：纯黑+低透明在浅底色上会显灰脏，实际推荐用带轻微色相的浅灰。
-
rgba(0, 0, 0, 0.05)在白色背景上几乎不可见，建议从rgba(0, 0, 0, 0.08)起步测试 - 更干净的做法是用偏暖/偏冷的浅灰，例如
rgba(30, 30, 40, 0.06)（微蓝灰）或rgba(60, 60, 60, 0.04)（中性浅灰） - 避免用
hsla()或十六进制 + alpha（如#0000001a），前者计算复杂，后者在旧版 Safari 中支持不稳定
阴影模糊半径和偏移量对“浅感”的影响
仅调低 alpha 不够，模糊半径（blur radius）太小会让阴影生硬，太大又会发虚失焦。浅色阴影需要更柔和的扩散感，同时保持形体可辨。
- 推荐组合：
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06)—— 小偏移 + 中等模糊，适合卡片悬停 - 若用于内凹效果（如输入框 focus），可用
inset+ 更低 alpha：box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) - 避免
box-shadow: 0 0 0 rgba(...)，零模糊会让阴影变成一圈硬边，完全失去“浅”感
深色模式下浅色阴影失效怎么办
同一段 box-shadow 在深底色上会彻底隐形甚至反向突兀，不能靠 JS 切换样式就完事——得用 CSS 媒体查询配合语义化颜色变量。
- 不要写死
rgba(0, 0, 0, 0.06)，改用自定义属性：box-shadow: 0 2px 8px var(--shadow-light); - 在
@media (prefers-color-scheme: dark)中重置：:root { --shadow-light: rgba(255, 255, 255, 0.08); } - 注意：深色模式下用白灰阴影时，alpha 值通常要比浅色模式高 0.02–0.04，否则还是看不见
性能提示：多层浅阴影叠加容易触发重绘
给一个元素加多个 box-shadow（比如模拟立体感）看似无害，但每个阴影都会参与合成层计算，尤其在滚动容器里可能掉帧。
立即学习“前端免费学习笔记（深入）”；
- 单个浅阴影优先用一层实现，如需层次感，用
filter: drop-shadow()分离处理（它不触发新层） - 慎用
box-shadow: 0 1px ... , 0 2px ... , 0 4px ...这类多值写法，浏览器会为每项单独绘制 - 移动端 iOS Safari 对低 alpha 阴影渲染有延迟，可加
transform: translateZ(0)强制 GPU 加速（仅当真出现卡顿时启用）
