box-shadow不会占用盒模型空间，因其纯属渲染层视觉效果，不参与布局计算，不影响offsetWidth、getBoundingClientRect()等尺寸属性，也不推挤相邻元素；所谓“变大”实为overflow:hidden裁剪、相邻元素无留白或误将border/padding归因于阴影所致。
不会。 box-shadow 完全不参与盒模型计算，既不改变 offsetWidth、getBoundingClientRect() 返回的尺寸，也不推挤相邻元素、不触发重排、不占用文档流空间。
为什么加了 box-shadow 元素看起来“变大”或“被挤开”
这不是阴影占了空间，而是视觉干扰或配套样式出错：
- 父容器设了
overflow: hidden，阴影被裁切，造成“突然收窄”的错觉 - 相邻元素没留足够
margin或gap，阴影视觉上压过去，误以为是布局侵占 - 误把
border或padding当成 box-shadow 的一部分——真正撑开布局的是它们，不是阴影 - 用了
transform或position: absolute移动元素，阴影跟着位移后覆盖其他内容，被当成“占位”
box-shadow: 0 0 0 2px #000 模拟边框时容易踩的坑
想用它替代 border 实现不占空间的描边，必须满足全部条件：
-
blur必须为0：哪怕0.1px都会触发高斯模糊，在 Safari 中左右粗细不一，缩放时边缘断开 -
h-offset和v-offset都得是0：否则阴影中心偏移，不像边框那样对称包裹 -
spread值别用小数（如0.5px）：在 125% 缩放下会被四舍五入丢边 - 颜色不能写成
transparent：看不见，但依然消耗 GPU 渲染资源
多层 box-shadow 的顺序和 overflow 裁剪的关系
逗号分隔的多层阴影，**后写的在最上层**；而是否显示完整，取决于父容器的 overflow 设置：
立即学习“前端免费学习笔记（深入）”；
- 漏掉逗号 → 整条
box-shadow声明被浏览器跳过，样式完全失效 - 想让白细边压住灰投影，必须把
0 0 0 1px #fff写在逗号后面 -
overflow: hidden裁的是绘制区域，不是“布局空间”：阴影仍被渲染，只是画布外的部分被硬切 - 内阴影
inset同样受overflow影响，且会压住自身内容——padding不够时文字直接被盖住
真正需要阴影“参与布局”时，CSS 不提供自动机制。要么手动算好 margin / padding 预留，要么用伪元素绝对定位抽离阴影层。别指望调 blur 或 spread 参数来“修复”布局问题——那不是它的职责范围。
