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 实现不占空间的描边，必须满足全部条件：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 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 参数来“修复”布局问题——那不是它的职责范围。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！