box-shadow 不影响盒模型计算，仅在绘制阶段视觉叠加；其不改变元素尺寸、布局行为及父容器高度计算，所有尺寸相关API返回值均不含阴影。
box-shadow 从不参与盒模型计算，它只是绘制阶段的一次视觉叠加，浏览器在布局（layout）阶段完全忽略它。
box-shadow 是渲染层效果，不是布局层属性
浏览器把页面构建分成 layout（布局）、paint（绘制）、composite（合成）几个阶段。box-shadow 只在 paint 阶段起作用，就像往已排好版的“底片”上盖一层半透明胶片——胶片再厚，底片尺寸不变。这意味着：
-
getBoundingClientRect()、offsetWidth、clientWidth返回的宽高永远不含阴影 - Flex/Grid 布局、margin 折叠、父容器自动高度计算，全都无视
box-shadow - 即使写
box-shadow: 0 0 0 100px #000模拟粗边框，元素实际宽度仍等于你写的width值
看起来“撑开”或“被裁”，其实是 overflow 或定位上下文问题
所谓“阴影影响尺寸”，99% 是误判，真正出问题的地方在别处：
- 父容器设了
overflow: hidden→ 阴影画出去了，被硬裁，不是盒子变大了 - 元素本身有
border但没配box-sizing: border-box→ 真正挤空间的是border，不是box-shadow - 用了
inset阴影但padding太小 → 文字被阴影盖住，像“塌陷”，其实内容区域根本没动 - 在
position: absolute元素上依赖阴影做定位 → 阴影坐标始终基于border box边缘，不是content box
box-shadow 和 box-sizing 完全无关
box-sizing 只控制 padding 和 border 是否计入 width/height，对 box-shadow 零影响：
立即学习“前端免费学习笔记（深入）”；
-
box-sizing: content-box下，阴影从更靠外的物理边界（border 外侧）开始画 -
box-sizing: border-box下，阴影起点仍是 border box 边缘，只是这个边缘因为 padding/border 被“挤进去了” - 无论哪种，阴影都不改变该边界的坐标，也不触发重排（reflow）
真正要手动预留空间的地方，从来不是 box-shadow 本身
如果你发现阴影被裁、卡片 hover 后错位、网格出现滚动条——问题不在 box-shadow 参数调得不够小，而在：
- 父容器是否显式留了视觉余量（比如加
padding或设overflow: visible） - 是否用
clip-path替代overflow: hidden来避免锯齿裁切 - 是否在 JS 中做尺寸判断时，忘了手动算上最大偏移 + 模糊半径
box-shadow 本身很干净，麻烦总来自你怎么把它放进已有布局里。
