box-shadow 仅在绘制阶段添加视觉效果，不改变元素布局尺寸；它始终绘制在 border box 外，不影响 getboundingclientrect() 等尺寸属性，也不受 box-sizing 控制；其实际渲染区域可能超出容器导致裁切或滚动，需通过容器溢出策略而非阴影参数调整来解决。
box-shadow 是绘制层效果，不是布局层产物
浏览器渲染分 layout（布局）和 paint（绘制）两个阶段。box-shadow 完全发生在 paint 阶段，它只是把阴影“画”在元素 border box 外侧，就像给照片加滤镜——底片（即盒模型尺寸）没变，只是输出画面多了光影。所以 getBoundingClientRect()、offsetWidth、clientWidth 全部返回原始宽高，和 box-shadow 参数毫无关系。
常见错觉来源：溢出 ≠ 占空间
你以为“盒子变大”，往往是因为阴影超出了父容器边界，触发了裁切或滚动条：
- 父容器设了
overflow: hidden→ 阴影被硬截断，看起来像“突然缩进” - 父容器宽度固定（如
width: 300px），而子元素box-shadow: 10px 0 20px rgba(0,0,0,0.2)向右延伸最多 30px → 实际渲染区域达 330px，超出部分撑出 body 水平滚动条 - 相邻元素没留
margin或gap，阴影视觉上压过去，误判为“挤占布局”
box-sizing 对 box-shadow 完全无效
box-sizing 只控制 padding 和 border 是否计入 width/height，对 box-shadow 无任何影响。无论你设 content-box 还是 border-box，阴影始终额外绘制在 border box 外，不参与任何尺寸计算。
验证方法很简单：打开 DevTools，选中元素，在 “Computed” 面板看 width 和 “Layout Width” 是否一致；再手动增减 box-shadow 值，观察这两个数值纹丝不动——那就是它真没占空间。
真正要防的不是 box-shadow，而是它的“可见范围”
box-shadow 本身不惹事，但它的渲染区域会真实占用像素空间。容易被忽略的关键点是：
- 阴影向四周扩展的最大距离 =
|offset-x| + |offset-y| + 2 × blur-radius + 2 × spread-radius - 这个区域若超出父容器
overflow边界，就会被裁或触发滚动——问题不在阴影，而在容器没预留视觉余量 - 用
clip-path替代overflow: hidden可避免边缘锯齿，同时保留阴影完整性
别指望靠改 box-sizing 或调 box-shadow 参数来“修复尺寸”，得从容器层级控制溢出行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
