box-shadow不占据布局空间，仅在绘制阶段渲染，不影响盒模型尺寸、布局计算及相邻元素位置。
不占据。box-shadow 完全不参与盒模型计算，不影响 offsetWidth、getBoundingClientRect().width 或父容器高度，也不会推挤相邻元素。
box-shadow 的渲染阶段与布局阶段分离
浏览器将渲染分为 layout（布局）和 paint（绘制）两个阶段：box-shadow 只在 paint 阶段生效，就像在已排好版的“底片”上叠加一层半透明胶片——胶片再厚，底片尺寸不变。这意味着：
-
margin折叠、flex项自动分配、grid轨道计算，全部无视box-shadow - 即使写
box-shadow: 0 0 100px rgba(0,0,0,0.5)，getComputedStyle(el).width仍返回你写的原始值 - DevTools 中“Computed”面板里的
width和 “Layout Width” 数值，增减阴影参数时纹丝不动
为什么看起来“盒子变大了”或“被裁了”
这不是 box-shadow 占了空间，而是它的视觉渲染区域超出了父容器的 overflow 边界：
- 父容器设了
overflow: hidden→ 阴影被硬截断，边缘出现锯齿 - 子元素用
box-shadow: 10px 0 20px rgba(0,0,0,0.2)，而父容器width: 300px→ 实际渲染最右可达300 + 10 + 20 = 330px，触发水平滚动条 - 误把
border撑开的尺寸当成阴影导致的（尤其当没配box-sizing: border-box时）
box-shadow 与 box-sizing 完全无关
box-sizing 只控制 padding 和 border 是否计入 width/height，对 box-shadow 零影响：
立即学习“前端免费学习笔记（深入）”；
-
box-sizing: content-box下，阴影从content + padding + border总宽边缘开始画 -
box-sizing: border-box下，阴影仍从该元素最终的 border box 边缘开始画，只是这个边缘因padding/border被“挤进去了” - 无论哪种，阴影起点坐标不变，也不触发重排（reflow）
真正要手动预留空间的地方不是 box-shadow 本身
如果你发现卡片 hover 后错位、网格右侧出现滚动条、内阴影盖住文字——问题不在 box-shadow 参数调得不够小，而在容器是否为视觉外延留出余量：
- 父容器显式加
padding（如padding: 20px），容纳最大偏移 + 模糊半径 - 用
clip-path替代overflow: hidden，避免阴影边缘被锯齿裁切 - JS 中做尺寸判断时，必须手动算：原始尺寸 + 2 ×
|offset-x|+ 2 ×blur-radius+ 2 ×spread-radius
