box-shadow 不影响元素布局尺寸，仅在绘制阶段渲染，不触发重排或改变 offsetwidth 等值；其视觉溢出问题源于父容器未预留足够空间，而非阴影本身占位。
不会。box-shadow 完全不改变元素的布局尺寸，offsetWidth、getBoundingClientRect().width、clientWidth 全部保持原值，和阴影参数毫无关系。
box-shadow 是纯绘制层效果，不参与 layout 计算
浏览器渲染分 layout（布局）和 paint（绘制）两个阶段：box-shadow 只在 paint 阶段“画”在元素 border box 外侧，就像给照片加滤镜——底片没变，只是输出画面多了光影。所以它既不推挤相邻元素，也不触发重排，更不会让 margin 或 padding 生效范围发生变化。
验证方法很直接：打开 DevTools，选中元素，在 “Computed” 面板盯住 width 和 “Layout Width”，反复增减 box-shadow 值，你会发现这两个数值纹丝不动。
为什么看起来“盒子变大了”或“被裁了”
这不是 box-shadow 占了空间，而是它的渲染区域超出了父容器的可见边界：
- 父容器设了
overflow: hidden→ 阴影被硬截断，边缘出现生硬锯齿 - 父容器宽度固定（如
width: 300px），而子元素用了box-shadow: 10px 0 20px rgba(0,0,0,0.2)→ 实际渲染区域最右可达300 + 10 + 20 = 330px，撑出水平滚动条 - 相邻元素没留
margin或gap→ 阴影视觉上压过去，误判为“挤占布局” - 把
border或padding的尺寸变化错当成阴影导致的
box-sizing 对 box-shadow 完全无效
box-sizing 只控制 padding 和 border 是否计入 width/height，对 box-shadow 没有任何影响。无论你用 content-box 还是 border-box，阴影始终从当前盒模型的 border edge 开始向外绘制。
例如：
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 边缘开始画 */
}
换成 border-box 后，总宽仍是 200px，但 padding 和 border 挤占了 content 区域，阴影就从这 200px 的盒边缘开始画——所以视觉上反而显得“更靠里”了。
真正要防的是阴影的“可见范围”，不是它“占空间”
阴影向四周扩展的最大距离 = |offset-x| + |offset-y| + 2 × blur-radius + 2 × spread-radius。这个区域若超出父容器的 overflow 边界，就会被裁或触发滚动——问题不在阴影本身，而在容器没预留视觉余量。
常见应对方式：
- 父容器显式加
padding（比如padding: 20px）来容纳阴影外延 - 设
overflow: visible（慎用，可能影响其他子元素） - 用
clip-path替代overflow: hidden，避免边缘裁切锯齿 - 对卡片网格等场景，hover 时加大阴影前，先确保父容器有足够留白
别指望靠调 box-shadow 参数或改 box-sizing 来“修复尺寸”，那不是它的职责。真正的控制点永远在容器层级——你得决定“允许阴影画多远”，而不是“让阴影别画那么远”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
