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 本身很干净,麻烦总来自你怎么把它放进已有布局里。


















