应避免对带 box-shadow 的元素使用 opacity，而应单独调节阴影颜色的 rgba 透明度；多层阴影需协同偏移、模糊与明度变化模拟景深；暗色模式下应提高阴影 alpha 值而非简单反色；border-radius 与 shadow 模糊值宜用偶数以规避渲染毛边。
color 和 opacity 混用会吃掉阴影层次
很多人想让卡片有“浮起感”，直接给 box-shadow 加 opacity: 0.9，结果阴影变淡、边缘发虚，UI 看起来反而更平。这是因为 opacity 会把整个元素（含阴影）一起透明化，阴影的深浅、扩散、模糊值全被削弱，层次就塌了。
真正该做的是：只调阴影自身的颜色明度和透明度，而不是动元素整体。
- 用
rgba(0, 0, 0, 0.1)替代black作为box-shadow的颜色，控制阴影透光量 - 深色背景上，改用
rgba(255, 255, 255, 0.08)这类浅色半透阴影，避免“脏灰” - 别对带
box-shadow的容器设opacity，否则 Safari 下阴影可能渲染异常
多层 shadow 不等于多层深度
写 box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.08) 看似叠加了两层，但实际只是视觉混合——浏览器最终合成一个像素级效果，并不产生真正的 Z 轴分离。用户感知不到“近阴影 vs 远投影”的空间差。
要模拟真实景深，得靠颜色 + 模糊 + 偏移三者协同变化：
立即学习“前端免费学习笔记（深入）”；
- 第一层（接触阴影）：
0 1px 2px rgba(0,0,0,0.12)—— 偏移小、模糊低、颜色稍重 - 第二层（环境阴影）：
0 4px 16px rgba(0,0,0,0.06)—— 偏移大、模糊高、颜色更透 - 避免三层以上，CSS 解析开销上升，移动端可能出现绘制抖动
dark mode 下 shadow 颜色不能简单 invert
把 rgba(0,0,0,0.1) 换成 rgba(255,255,255,0.1) 并不能适配暗色模式——它在深灰背景上几乎不可见，且缺乏环境光逻辑。阴影本质是遮挡，不是反光；暗背景下，合理阴影应是“比背景略深的灰”，而非“发白”。
推荐做法是用 CSS 自定义属性配合 @media (prefers-color-scheme: dark) 动态切换：
body {
--shadow-base: rgba(0, 0, 0, 0.08);
}
@media (prefers-color-scheme: dark) {
body {
--shadow-base: rgba(0, 0, 0, 0.24);
}
}
.card { box-shadow: 0 2px 8px var(--shadow-base); }
- 暗色模式下，提高
rgba第四个参数（alpha），不是换颜色 - 别依赖
filter: invert()处理阴影，它会破坏 blur 渲染精度 - 检查设计系统中所有
box-shadow是否都用了变量，硬编码值在主题切换时会失效
border-radius 和 shadow 的像素对齐问题
圆角容器加阴影后，边缘常出现模糊毛边或颜色断层，尤其在高 DPI 屏幕上明显。这不是 bug，是抗锯齿采样与半透阴影叠加后的渲染副作用。
关键不是“怎么修”，而是“怎么避”：
- 确保
border-radius和box-shadow的模糊值（blur）为偶数，如4px、8px，奇数值易触发亚像素渲染抖动 - 阴影偏移（offset）尽量用整数，避免
0.5px类似值 - 若必须精细控制，可加
transform: translateZ(0)强制 GPU 合成，但会增加内存占用
