box-shadow 默认不撑大元素尺寸，它仅作为视觉层绘制在盒模型外，不影响布局宽高、内边距、外边距及 getBoundingClientRect() 值；其引发的截断或滚动是因阴影溢出父容器 overflow 范围所致。
box-shadow 会撑大元素尺寸吗？
默认情况下，box-shadow 不影响元素的布局尺寸——它只是「画在盒子外面」的视觉效果，不参与文档流，也不改变 width/height、内边距或外边距计算。但很多人觉得「盒子变大了」，其实是被视觉错觉或父容器溢出遮罩误导了，或者没注意到阴影本身超出边界后触发了滚动/裁剪等副作用。
为什么加了 box-shadow 后内容被截断或出现滚动条？
这是最常被误认为「尺寸变大」的场景：当 box-shadow 的模糊半径（blur-radius）或扩展值（spread-radius）较大时，阴影会向四周延伸，可能超出父容器的 overflow: hidden 范围，导致被裁剪；若父容器没有设 overflow，而子元素阴影撑出了视口，则可能意外触发 body 滚动条。
- 阴影本身不增加
getBoundingClientRect()返回的width/height，但会扩大实际渲染占用的像素区域 -
box-sizing: border-box只控制padding和border是否计入宽高，对box-shadow完全无影响——它永远「额外绘制」 - 如果用
transform: scale()或filter: drop-shadow()替代，行为完全不同，别混用
如何让 box-shadow 不「干扰」布局和交互？
关键不是靠 box-sizing 去「修正」，而是从使用方式上规避副作用：
- 用
outline+outline-offset替代简单外发光（不占空间、不触发重排） - 对需要精确尺寸的容器（如卡片网格），显式设置
overflow: visible父级，并确保父容器有足够留白 - 避免在
position: absolute元素上依赖阴影位置做定位——阴影坐标是相对于元素盒模型边缘的，不是 content-box - 若必须限制阴影可见范围，优先用
clip-path而非overflow: hidden，后者可能截断阴影边缘导致锯齿
box-shadow 和 box-sizing 配合的真实作用点
box-sizing 对 box-shadow 没有任何直接作用，但它会影响你「感知」阴影是否越界：
立即学习“前端免费学习笔记（深入）”；
div {
width: 200px;
padding: 16px;
border: 4px solid #333;
box-sizing: content-box; /* 此时总宽 = 200 + 32 + 8 = 240px */
box-shadow: 0 0 20px rgba(0,0,0,0.2); /* 阴影从 240px 边缘开始画 */
}
<p>div {
box-sizing: border-box; /<em> 总宽保持 200px，但 padding/border 挤占 content </em>/
/<em> 阴影仍从这 200px 的盒边缘开始画 —— 所以看起来「更靠里」了 </em>/
}真正起作用的是：当你改用 border-box 后，相同 width 下内容区变小，padding/border 占位更明确，反而更容易预估阴影落点。但别指望它「收缩阴影」——阴影永远以最终盒模型的边界为起点。
最容易被忽略的是：多层嵌套阴影、负 margin 与 box-shadow 共存时，视觉重心偏移比尺寸变化更影响体验。这时候该调的不是 box-sizing，而是 shadow 的 offset-x/offset-y 和层级 z-index。
