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，而是想清楚——这个阴影是要强调「谁在上」，还是暗示「哪里可交互」，又或者只是让呼吸感更自然。参数调得再准，脱离上下文就只是装饰。
