box-shadow 不占用布局空间，纯属视觉修饰，不影响元素尺寸、文档流位置及相邻元素；其被 overflow: hidden 裁剪是因绘制区域超出而非占位；需手动用 margin 等预留空间。
box-shadow 不占用布局空间，但会影响视觉层级和渲染性能
直接回答：box-shadow 完全不参与盒模型计算，不会改变元素的 width、height，也不会推挤相邻元素或触发滚动条。这是它的默认行为，也是设计初衷——纯视觉修饰。
- 即使设置
box-shadow: 0 0 100px rgba(0,0,0,0.5)，元素实际尺寸和文档流位置毫无变化 - 父容器无需额外
padding或margin就能“容纳”阴影（因为阴影压根没进布局） - 但注意：如果父容器设了
overflow: hidden，长阴影会被裁掉——这不是“占空间”，而是被剪裁了
为什么有时看起来像“占了空间”？常见错觉来源
用户常误以为阴影“撑开”了布局，其实背后是其他 CSS 行为在干扰：
-
border或padding被漏加，而阴影让元素显得“变大”，其实是对比造成的视觉误差 - 用了
box-sizing: content-box（默认值），导致width + border + padding超出预期，误归因于box-shadow - 多重阴影叠加后模糊区域扩大，在移动端或低分辨率屏上容易被误读为“溢出”
- 配合
transform或position: absolute使用时，阴影随元素位移，可能意外覆盖其他内容，让人觉得“占位”
想让阴影“预留空间”？手动模拟才是正解
如果你确实需要阴影所占的视觉区域也参与布局（比如防止文字被阴影遮挡、或留白给打印样式），CSS 不提供自动方案，得自己算着来：
- 用
margin模拟：比如阴影下偏 8px、模糊 12px，可加margin-bottom: 20px预留余量 - 用伪元素 +
inset阴影做“内占位”：更可控，且不影响主元素尺寸 - 避免用
padding硬撑——会同时影响内容区域，破坏设计意图
/* 示例：用 margin 预留外阴影空间 */
.card {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
margin-bottom: 16px; /* 手动预留，约 = v-offset + blur * 0.6 */
}性能提醒：不占空间 ≠ 没开销
虽然不挤布局，但 box-shadow 是 GPU 密集型操作，尤其在以下情况会拖慢渲染：
立即学习“前端免费学习笔记（深入）”；
- 模糊半径（
blur）超过 12px，尤其在中低端移动设备上 - 大量元素同时使用多重阴影（逗号分隔多个）
- 动画中频繁变更
box-shadow值，却没加will-change: box-shadow - 用
rgba(0,0,0,1)纯黑+高模糊，比rgba(0,0,0,0.15)多消耗约 40% 渲染时间
真正容易被忽略的点：阴影是否可见，和它是否“存在”是两回事。浏览器仍会为不可见区域（如被 overflow: hidden 裁掉的部分）做绘制计算——所以裁剪不是优化，只是掩盖问题。
