box-shadow不占据布局空间，仅在绘制阶段渲染，不影响盒模型尺寸、布局计算及相邻元素位置。

不占据。box-shadow 完全不参与盒模型计算，不影响 offsetWidth、getBoundingClientRect().width 或父容器高度，也不会推挤相邻元素。

box-shadow 的渲染阶段与布局阶段分离

浏览器将渲染分为 layout（布局）和 paint（绘制）两个阶段：box-shadow 只在 paint 阶段生效，就像在已排好版的“底片”上叠加一层半透明胶片——胶片再厚，底片尺寸不变。这意味着：

• margin 折叠、flex 项自动分配、grid 轨道计算，全部无视 box-shadow
• 即使写 box-shadow: 0 0 100px rgba(0,0,0,0.5)，getComputedStyle(el).width 仍返回你写的原始值
• DevTools 中“Computed”面板里的 width 和 “Layout Width” 数值，增减阴影参数时纹丝不动

为什么看起来“盒子变大了”或“被裁了”

这不是 box-shadow 占了空间，而是它的视觉渲染区域超出了父容器的 overflow 边界：

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

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

下载

• 父容器设了 overflow: hidden → 阴影被硬截断，边缘出现锯齿
• 子元素用 box-shadow: 10px 0 20px rgba(0,0,0,0.2)，而父容器 width: 300px → 实际渲染最右可达 300 + 10 + 20 = 330px，触发水平滚动条
• 误把 border 撑开的尺寸当成阴影导致的（尤其当没配 box-sizing: border-box 时）

box-shadow 与 box-sizing 完全无关

box-sizing 只控制 padding 和 border 是否计入 width/height，对 box-shadow 零影响：

• box-sizing: content-box 下，阴影从 content + padding + border 总宽边缘开始画
• box-sizing: border-box 下，阴影仍从该元素最终的 border box 边缘开始画，只是这个边缘因 padding/border 被“挤进去了”
• 无论哪种，阴影起点坐标不变，也不触发重排（reflow）

真正要手动预留空间的地方不是 box-shadow 本身

如果你发现卡片 hover 后错位、网格右侧出现滚动条、内阴影盖住文字——问题不在 box-shadow 参数调得不够小，而在容器是否为视觉外延留出余量：

• 父容器显式加 padding（如 padding: 20px），容纳最大偏移 + 模糊半径
• 用 clip-path 替代 overflow: hidden，避免阴影边缘被锯齿裁切
• JS 中做尺寸判断时，必须手动算：原始尺寸 + 2 × |offset-x| + 2 × blur-radius + 2 × spread-radius

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