box-shadow 不影响盒模型计算，仅在绘制阶段视觉叠加；其不改变元素尺寸、布局行为及父容器高度计算，所有尺寸相关api返回值均不含阴影。

box-shadow 从不参与盒模型计算，它只是绘制阶段的一次视觉叠加，浏览器在布局（layout）阶段完全忽略它。

box-shadow 是渲染层效果，不是布局层属性

浏览器把页面构建分成 layout（布局）、paint（绘制）、composite（合成）几个阶段。box-shadow 只在 paint 阶段起作用，就像往已排好版的“底片”上盖一层半透明胶片——胶片再厚，底片尺寸不变。这意味着：

• getBoundingClientRect()、offsetWidth、clientWidth 返回的宽高永远不含阴影
• Flex/Grid 布局、margin 折叠、父容器自动高度计算，全都无视 box-shadow
• 即使写 box-shadow: 0 0 0 100px #000 模拟粗边框，元素实际宽度仍等于你写的 width 值

看起来“撑开”或“被裁”，其实是 overflow 或定位上下文问题

所谓“阴影影响尺寸”，99% 是误判，真正出问题的地方在别处：

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

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

下载

• 父容器设了 overflow: hidden → 阴影画出去了，被硬裁，不是盒子变大了
• 元素本身有 border 但没配 box-sizing: border-box → 真正挤空间的是 border，不是 box-shadow
• 用了 inset 阴影但 padding 太小 → 文字被阴影盖住，像“塌陷”，其实内容区域根本没动
• 在 position: absolute 元素上依赖阴影做定位 → 阴影坐标始终基于 border box 边缘，不是 content box

box-shadow 和 box-sizing 完全无关

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

• box-sizing: content-box 下，阴影从更靠外的物理边界（border 外侧）开始画
• box-sizing: border-box 下，阴影起点仍是 border box 边缘，只是这个边缘因为 padding/border 被“挤进去了”
• 无论哪种，阴影都不改变该边界的坐标，也不触发重排（reflow）

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

如果你发现阴影被裁、卡片 hover 后错位、网格出现滚动条——问题不在 box-shadow 参数调得不够小，而在：

• 父容器是否显式留了视觉余量（比如加 padding 或设 overflow: visible）
• 是否用 clip-path 替代 overflow: hidden 来避免锯齿裁切
• 是否在 JS 中做尺寸判断时，忘了手动算上最大偏移 + 模糊半径

box-shadow 本身很干净，麻烦总来自你怎么把它放进已有布局里。

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