box-shadow 不参与布局计算，仅在绘制阶段叠加，不影响元素尺寸和周围排版；其效果由父容器裁切、伪元素模拟或多层逗号分隔实现，js 尺寸检测需手动计算溢出。
box-shadow 不参与布局计算，只在绘制阶段叠加，所以它对周围元素的排版毫无影响。
box-shadow 是纯绘制层效果，不触发重排
浏览器把页面构建拆成 layout（布局）、paint（绘制）、composite（合成）三个阶段。box-shadow 完全不介入 layout 阶段：元素的 offsetWidth、getBoundingClientRect()、父容器自动高度计算，全都无视阴影参数。哪怕你写 box-shadow: 0 0 100px rgba(0,0,0,0.5)，元素实际占位仍和没加时一模一样。
- 常见错误现象：给卡片加 hover 阴影后，旁边元素没被挤开，误以为“失效”——其实是它本就不该挤
- 真正触发重排的，是
border、padding、margin这些 layout 层属性，不是box-shadow - 用 DevTools 看 computed styles，
box-shadow永远不会出现在 width/height 相关字段里
阴影溢出导致的“错位”其实是父容器裁切问题
所谓“阴影撑开布局”，99% 是因为阴影画出去了，而父容器设了 overflow: hidden 或宽度固定，导致视觉被截、或意外触发 body 滚动条。这不是 box-shadow 在占空间，而是它画得太远，超出了容器划定的“画布边界”。
- 例如：父容器
width: 300px; overflow: hidden，子元素box-shadow: 20px 0 0 rgba(0,0,0,0.2)→ 阴影向右延伸 20px，超出部分被硬裁 - 解决方向不是调小
blur或spread，而是：父容器加 padding、设 overflow: visible、或用clip-path替代overflow: hidden -
inset阴影虽不外溢，但若padding不足，文字会被盖住——这也不是尺寸变化，是内容区域被视觉遮挡
多层阴影和伪元素才是控制“不干扰布局”的关键手段
如果你需要阴影参与布局逻辑（比如让父容器自动包住阴影），box-shadow 本身做不到。必须靠外部手段模拟：
- 用
::before伪元素 +position: absolute+z-index: -1单独画阴影，主体元素保持原始尺寸 - 多层阴影用逗号分隔：
box-shadow: 0 2px 4px -1px #000, 0 8px 16px -4px #000，注意顺序：后写的在上层 - 想替代边框又不破坏 Grid/Flex 尺寸承诺？用
box-shadow: inset 0 0 0 1px #ccc，它不增加任何盒模型尺寸，还天然跟随border-radius
最容易被忽略的一点：JS 里做尺寸判断时，getBoundingClientRect() 返回值永远不含阴影；如果要检测阴影是否溢出，得手动算 —— 原始尺寸 + 2 × 最大偏移 + 2 × 模糊半径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
