css盒模型box-shadow对盒子大小有影响吗

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。

基本上就这些。