box-shadow 可实现单侧、内阴影、多层阴影等效果，但非布局属性；在 flex/grid 中易因父容器溢出裁剪而失效；移动端需控制模糊度并适配深色模式；filter: drop-shadow() 更适合圆角或透明元素。

box-shadow 能实现哪些阴影布局效果

HTML5 本身不提供“阴影布局”语法，所有阴影效果都依赖 CSS 的 box-shadow 属性。它不是布局工具，而是视觉修饰手段，但能显著增强层次感和空间感——比如让卡片浮起、按钮有按压反馈、表单区域突出显示。

关键在于理解四个核心参数：offset-x、offset-y、blur-radius、spread-radius（可选）和颜色。负值偏移能让阴影出现在元素上方或左侧；blur-radius 为 0 时是硬边阴影；spread-radius 为正会扩大阴影面积，为负则收缩。

• 单侧阴影：设 offset-x 或 offset-y 为非零，其余偏移为 0，blur-radius 控制柔和度（如 box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1)）
• 内阴影：加 inset 关键字（如 box-shadow: inset 0 2px 4px rgba(0,0,0,0.06)），常用于输入框聚焦态
• 多层阴影：用逗号分隔多个阴影声明，可组合外扩+内陷+不同方向（如卡片常用：外阴影表浮起 + 内阴影表边缘收束）

阴影在 flex/grid 布局中容易失效的常见原因

当 box-shadow 在 display: flex 或 display: grid 容器里“看不见”，大概率不是阴影写错了，而是父容器裁剪了溢出内容。

典型表现：子元素设置了阴影，但只显示一半甚至完全不显示。根本原因是父容器默认 overflow: hidden 或未设明确高度/宽度，导致阴影被截断。

• 检查父容器是否设置了 overflow: hidden、overflow: auto —— 阴影属于“溢出内容”，会被裁剪
• flex 容器若子项用 flex: 1 却没给父容器设 min-height，可能导致计算高度为 0，阴影无处渲染
• grid 容器中，若行高用 fr 单位且内容空，可能撑不开网格轨道，阴影落在不可见区域
• 临时调试技巧：给父容器加 outline: 1px solid red，看实际渲染边界是否包裹住阴影范围

移动端适配阴影时要注意的三个细节

移动设备屏幕小、DPR 高、性能敏感，盲目套用桌面端阴影参数会导致模糊不清、耗电增加或滚动卡顿。

• blur-radius 建议控制在 4px–12px 范围内；超过 16px 在 iPhone 上易糊成一片，且触发全图层重绘
• 避免对频繁重绘元素（如 position: fixed 导航栏、轮播图）使用大范围 box-shadow，尤其带 inset 的，iOS Safari 渲染压力明显上升
• 深色模式下，rgba(0,0,0,0.1) 这类低透明度黑阴影在深背景上几乎不可见，应配合 @media (prefers-color-scheme: dark) 切换为浅灰阴影（如 rgba(255,255,255,0.08)）

用 filter: drop-shadow() 替代 box-shadow 的适用场景

filter: drop-shadow() 和 box-shadow 看似相似，但底层逻辑完全不同：前者基于元素的**实际 Alpha 通道轮廓**投射阴影（支持圆角、SVG、图片透明区域），后者只作用于元素的**盒模型矩形边界**。

这意味着：如果你的元素有 border-radius: 50%、clip-path 或是 PNG 透明图，box-shadow 仍会投出方块影子，而 drop-shadow() 才能贴合真实形状。

img.rounded {
  border-radius: 50%;
  /* ❌ box-shadow 仍为方形阴影 */
  /* box-shadow: 0 4px 12px rgba(0,0,0,0.15); */
/ ✅ drop-shadow 跟随圆形边缘 /
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}

注意：drop-shadow() 不支持 inset，也不能多层叠加（逗号分隔会报错），且在旧版 Safari 中需加 -webkit- 前缀。

阴影不是布局属性，但它直接影响视觉层级判断。真正难的不是写对那行 CSS，而是想清楚——这个阴影是要强调「谁在上」，还是暗示「哪里可交互」，又或者只是让呼吸感更自然。参数调得再准，脱离上下文就只是装饰。