box-shadow是CSS中用于添加阴影的属性，它渲染在border box外但不影响布局，不改变元素尺寸或位置，也不参与盒模型计算，仅作为视觉效果存在。
box-shadow 不会影响 CSS 盒模型中盒子的布局大小。
box-shadow 是什么
box-shadow 用于给元素添加阴影效果，它渲染在元素的 border box 外部（默认情况下），但这个阴影部分不占据文档流中的空间，也不会改变元素本身的 width 和 height。
对布局的影响
即使设置了很大的模糊半径或偏移量，box-shadow 不会：
- 改变元素的实际尺寸
- 影响其他元素的排列位置
- 被包含在 margin、border、padding 或 content 的计算中
换句话说，两个 div，一个有 box-shadow，一个没有，在页面布局中占用的空间完全一样。
立即学习“前端免费学习笔记（深入）”；
视觉与溢出
虽然阴影不影响布局，但它仍然可能在视觉上“溢出”父容器。如果父元素设置了 overflow: hidden，那么超出部分的阴影会被裁剪掉。
例如：
上面例子中，内部 div 的阴影可能会被外层容器裁掉，因为 overflow: hidden 会裁剪超出边界的视觉内容，包括阴影。
总结
box-shadow 只是视觉装饰，不会改变元素的盒模型尺寸或布局行为。它不影响 width、height、margin、padding 等计算。但如果希望看到完整阴影，需要注意父元素是否设置了 overflow:hidden。
基本上就这些。
