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。
基本上就这些。










