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 切出的任意形状。

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

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

下载

性能与兼容性影响：前者硬件加速友好、兼容性极佳（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 语法，而是判断什么时候该接受它“不占位”的事实，什么时候必须绕过它用别的手段达成视觉目标。多数布局问题，根源不在阴影本身，而在没区分清“绘制”和“布局”这两个阶段。

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