box-shadow 完全不计入盒模型，仅是渲染层的视觉叠加，不影响布局流、不触发重排、不改变元素实际尺寸；常见“占位”错觉源于 overflow: hidden、border-radius 配合不当、视觉膨胀或 border 与 box-sizing 混用。
box-shadow 不改变元素实际尺寸，也不参与盒模型计算
直接回答：box-shadow 完全不计入盒模型（content + padding + border + margin），它只是渲染层的视觉叠加，不影响布局流、不触发重排（reflow）、也不会撑开父容器或挤压兄弟元素。
这意味着：
- 给一个
width: 200px; height: 100px;的 div 加上box-shadow: 0 0 30px rgba(0,0,0,0.3);，它的实际占用空间仍是 200×100，滚动条不会出现，相邻元素位置丝毫不动； - 即使阴影非常大（比如
box-shadow: 0 0 0 50px #000;模拟粗边框），元素的getBoundingClientRect()返回的宽高也完全不含阴影； - JS 检测
offsetWidth、clientWidth或用getComputedStyle(el).width都拿不到阴影信息——它压根不在盒模型里。
为什么看起来“占位”了？常见错觉来源
所谓“box-shadow 占位”，其实是其他 CSS 行为造成的视觉干扰，和 box-shadow 本身无关：
-
父容器设置了
overflow: hidden：内阴影（inset）可能被裁剪，误以为“被挡住”，其实是容器主动截断； -
元素用了
border-radius但没配好overflow：圆角+外阴影本该自然延伸，但如果父级有overflow: hidden，阴影会被硬切，显得“不完整”； -
阴影颜色太深/太亮，造成视觉膨胀感：比如纯白阴影
box-shadow: 0 0 10px #fff在暗背景下会“发虚”，让人误判边界； -
和
border混用时未重置 box-sizing：如果同时写了border: 2px solid和box-shadow，而没设box-sizing: border-box，那 border 本身就会额外增加尺寸——这时“变大”的是 border，不是 shadow。
用 box-shadow 替代 border 的实操要点
当想避免 border 占据布局空间（比如卡片需要精确 300px 宽，又想要“边框感”），box-shadow 是更干净的选择：
立即学习“前端免费学习笔记（深入）”；
.card {
width: 300px;
height: 200px;
background: white;
/* ✅ 用 shadow 模拟 1px 边框，不占空间 */
box-shadow: 0 0 0 1px #ddd;
/* ❌ 不要再写 border: 1px solid #ddd —— 它会让实际宽度变成 302px */
}进阶技巧：
- 多层 shadow 可模拟「描边+微光」效果：
box-shadow: 0 0 0 1px #ccc, 0 0 4px rgba(0,0,0,0.08); - 要支持圆角边框感？直接加
border-radius，box-shadow会自动贴合形状，无需额外处理； - 响应式场景下，用
rem或em控制 spread 值（第四个参数），比固定px更灵活。
内阴影（inset）的隐藏陷阱
box-shadow: inset ... 虽然也不影响尺寸，但容易因容器限制失效：
- 父级
overflow: hidden会直接吃掉内阴影——哪怕阴影本应在内容区内； - 元素自身
padding不足时，inset 阴影可能紧贴文字，显得拥挤；建议至少留padding: 8px再加inset 0 1px 2px rgba(0,0,0,0.1)； - 不要指望
inset阴影能“穿透”子元素：它只作用于当前元素的背景层，子元素会盖在它上面。
真正容易被忽略的，是「阴影的渲染时机」——它发生在绘制阶段（paint），晚于布局（layout）和合成（composite）。所以哪怕你用 JS 动态改 shadow，只要不触发 layout，性能就极轻。但若同时改了 width 或 margin，那就另当别论了。
