box-shadow 不改变 getBoundingClientRect() 宽高，因其仅在绘制阶段渲染，不参与布局计算；其尺寸始终基于 content、padding、border 确定，与阴影参数无关。
box-shadow 为什么不会改变 getBoundingClientRect() 返回的宽高
因为 box-shadow 是纯渲染层（paint phase）产物，不参与布局计算（layout phase）。浏览器在 layout 阶段只根据 content、padding、border、margin 算出元素尺寸和位置；到了 paint 阶段，才把阴影“画”在 border box 外侧——就像给照片加滤镜，不改变底片大小。
常见错误现象：getBoundingClientRect().width 始终等于 clientWidth（含 border），和 box-shadow 参数完全无关；有人误以为阴影大了“盒子变宽”，其实是用 DevTools 选中元素时，视觉上看到阴影延伸，但数值栏里宽高纹丝不动。
- 即使写
box-shadow: 0 0 100px rgba(0,0,0,0.5)，offsetWidth和getComputedStyle(el).width仍只返回原始设定值 -
box-sizing对box-shadow毫无影响——它只管 padding/border 是否计入 width/height，不管“画在哪” - JS 动画或 resize 监听里若依赖尺寸判断阴影是否溢出，必须手动计算：原始尺寸 + 2 × 最大偏移 + 2 × 模糊半径
父容器出现滚动条或阴影被裁切，真不是 box-shadow “占空间”
滚动条出现、阴影边缘被硬切，根源是阴影绘制区域超出了父容器的 overflow 边界，而非 box-shadow 自身挤占了布局空间。它就像投影仪投出的光，光斑超出幕布范围，不是光斑“变大了”，而是幕布太小。
使用场景：卡片网格布局中，hover 时加大阴影，结果整行错位或右侧出现横向滚动条——问题不在卡片本身，而在其父容器没预留足够视觉余量。
立即学习“前端免费学习笔记（深入）”；
- 父容器设了
overflow: hidden→ 阴影被裁，尤其内阴影inset更容易被截断 - 父容器宽度固定（如
width: 300px），而子元素阴影向右偏移10px+ 模糊20px→ 实际渲染宽度达 300 + 30 = 330px，超出部分触发 body 滚动 - 解决方向不是缩小阴影，而是：显式给父容器加
padding、或设overflow: visible、或用clip-path替代overflow: hidden避免锯齿
box-shadow 和 drop-shadow 的关键区别：矩形盒模型 vs Alpha 通道
box-shadow 始终基于元素的 border box（矩形框）生成阴影；而 filter: drop-shadow() 是按元素实际像素 Alpha 通道生成，能贴合 SVG 路径、border-radius 甚至 clip-path 切出的任意形状。
性能与兼容性影响：前者硬件加速友好、兼容性极佳（IE9+）；后者需开启 GPU 加速，旧版 Safari 有渲染 bug，且无法实现内阴影（inset）。
- 圆角按钮加阴影：用
box-shadow即可自然跟随border-radius，无需额外处理 - 不规则图形（如带透明镂空的 PNG、SVG icon）需要真实投影 → 必须用
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) - 同时用两者会叠加性能开销，非必要不混用；
drop-shadow不支持多层逗号分隔写法
想让阴影“参与布局”，别调 box-shadow，改布局策略
box-shadow 的设计定位就是“不占位”，强行让它“撑开空间”违背初衷。真正需要阴影占位的场景（比如卡片之间留白必须包含阴影厚度），应该用布局手段模拟，而不是寄望于属性行为改变。
容易踩的坑：有人尝试用 margin 或 padding “预留给阴影的空间”，但一旦阴影参数变化（如响应式下 blur-radius 缩小），留白就过剩或不足；更糟的是，在 flex/grid 容器中，margin 可能被自动对齐逻辑干扰。
- 推荐做法：用伪元素
::before绝对定位绘制阴影，并设z-index: -1，主体元素保持原始尺寸，父容器控制定位上下文 - 替代方案：用
outline+outline-offset实现简单外发光，它也不占位、不触发重排，但不支持模糊和 inset - 最直白但可控的方式：给父容器加
padding，并确保所有子元素阴影都在该 padding 区域内渲染——这是唯一能稳定预留“视觉空间”的办法
真正难的不是写对 box-shadow 语法，而是判断什么时候该接受它“不占位”的事实，什么时候必须绕过它用别的手段达成视觉目标。多数布局问题，根源不在阴影本身，而在没区分清“绘制”和“布局”这两个阶段。
