box-shadow 看不出层次主因是 blur-radius 过大、offset 为 0、背景对比不足；需结合明度差≥15%的色阶、差异化阴影参数、z-index 及参照关系协同构建视觉深度。
为什么 box-shadow 加了却看不出层次？
常见错觉是“加了阴影就等于有层次”，实际往往因为 shadow 的 blur-radius 过大、offset 为 0，或背景色太亮导致对比不足。初级项目里最常犯的错误是统一用 box-shadow: 0 2px 8px rgba(0,0,0,0.1) 套所有卡片——结果所有元素“浮”得一样高，反而失去视觉先后关系。
- 真正模拟物理层次，需要不同组件有明显差异的
z-index+box-shadow组合：悬浮按钮比卡片高，卡片比背景高，背景本身最好带轻微inset阴影或渐变来锚定位置 - 避免在纯白背景（
#fff）上用rgba(0,0,0,0.1)阴影——人眼对低对比度灰阶极不敏感，建议改用rgba(0,0,0,0.12)起步，并搭配0 1px 3px这类小偏移 - 深色模式下别直接复用浅色阴影值，
rgba(255,255,255,0.08)比rgba(0,0,0,0.12)在暗底上更有效
用颜色制造「远近感」比单纯调阴影更可靠
CSS 中颜色本身就有空间暗示：暖色（如 #ff6b6b）视觉上前倾，冷色（如 #4ecdc4）后退；明度高的色块显“近”，低明度显“远”。很多新手只调阴影，忽略背景色与主色的明度差才是层次基底。
- 导航栏用
#2d3748（深灰），内容区用#edf2f7（浅灰），底部用#f7fafc（更浅），三者明度差 ≥ 15%，人眼才能自然感知前后顺序 - 不要让按钮和卡片用同一色系的饱和色，比如都用
blue-500；改成按钮用blue-600（更深更重），卡片用blue-50（极浅，显轻） - 文字层级也要配合：标题用
#1a202c（深黑），正文用#4a5568（中灰），辅助文字用#a0aec0（浅灰）——这不是为了“好看”，是强制视觉动线从重到轻、从前到后
filter: drop-shadow() 和 box-shadow 到底该用谁？
box-shadow 是盒模型投影，受 border-radius 和 overflow: hidden 影响；drop-shadow() 是图像级投影，能跟随内部 SVG 或透明 PNG 边缘。初级项目中误用会直接破坏层次逻辑。
/* 错误：给带圆角的卡片用 drop-shadow，阴影边缘生硬锯齿 */
.card {
border-radius: 12px;
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}
/ 正确：优先用 box-shadow，它尊重 border-radius /
.card {
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
/ 仅当需要投影贴合内部不规则图形时才用 drop-shadow，例如图标按钮 /
.icon-btn img {
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
-
drop-shadow()性能开销略高，且不支持多层阴影写法（box-shadow: a, b, c可以），日常布局慎用 - 如果卡片内含
clip-path或mask，box-shadow会失效，此时必须用drop-shadow()
移动端要特别注意阴影的「可感知性」
手机屏幕小、环境光强，box-shadow 容易被“吃掉”。不是加更重的阴影就行，而是得调整作用域和参照系。
立即学习“前端免费学习笔记（深入）”；
- 避免给全屏滚动容器（如
.page）加阴影——没有参照物，阴影等于没加；改为给内部卡片、输入框、Tab 栏等局部元素加 - 手指点击区域需有即时反馈层次：正常态用
box-shadow: 0 1px 2px rgba(0,0,0,0.05)，按下态改用box-shadow: inset 0 1px 2px rgba(0,0,0,0.1)（内阴影压暗边缘，模拟按压凹陷） - iOS Safari 对
blur-radius > 20px渲染不稳定，建议阴影模糊值控制在16px以内
真正卡住层次感的，往往不是不会写 box-shadow，而是没意识到：颜色明度差是骨架，阴影是肌肉，而留白和参照关系才是神经信号。少调一个参数，可能比多加三层阴影更有效。
