box-shadow不参与布局计算，仅在paint阶段叠加视觉效果，因此不影响offsetwidth、getboundingclientrect()及flex/grid排列，也不触发重排。
box-shadow 不参与布局计算，只在绘制阶段叠加视觉效果，所以它不会改变元素的 offsetWidth、getBoundingClientRect() 或影响 Flex/Grid 排列。
box-shadow 的渲染阶段在哪
浏览器把页面构建分成 layout → paint → composite 三步。box-shadow 完全不参与 layout 阶段：此时 width/height/padding/border 已算好，元素位置和尺寸已固定；box-shadow 只是在 paint 阶段“盖一层半透明胶片”，就像给照片加滤镜——底片尺寸不变，阴影再大也不触发重排。
常见错误现象：getBoundingClientRect().width 始终等于 clientWidth（含 border），和 box-shadow 参数完全无关；DevTools 里看到阴影延伸，但数值栏宽高纹丝不动。
为什么父容器会裁掉阴影或出现滚动条
阴影被裁、横向滚动条出现，不是因为 box-shadow “占空间”，而是它画出去的区域超出了父容器的 overflow 边界。
- 父容器设了
overflow: hidden→ 阴影被硬裁，尤其inset阴影容易被截断边缘 - 父容器宽度固定（如
width: 300px），子元素用box-shadow: 10px 0 20px rgba(0,0,0,0.2)→ 实际渲染向右延伸最多 30px，超出部分触发 body 滚动 - 解决方向不是调小阴影，而是显式预留视觉余量：给父容器加
padding、设overflow: visible，或用clip-path替代overflow: hidden
inset 阴影为什么容易“盖住内容”
inset 阴影不向外溢出，但会向内压进元素内部，直接覆盖 content 区域。它不改变盒模型尺寸，但会侵占视觉可用空间。
使用场景：按钮按压态、输入框聚焦态、卡片内凹效果
- 务必检查
padding是否 ≥ 最大偏移 + 模糊半径（例如inset 0 2px 8px至少留 10px 内边距） - 在
border-radius元素上表现正常，但如果父容器有overflow: hidden，可能意外裁切内阴影边缘 - 不要对
<input>等替换元素滥用inset，某些浏览器渲染不一致
box-sizing 对 box-shadow 有没有影响
完全没有。box-sizing 只控制 padding 和 border 是否计入 width/height，而 box-shadow 始终以 border box 边缘为起点绘制。
参数差异：
-
box-sizing: content-box下，border box 更大 → 阴影从更靠外的位置开始画 -
box-sizing: border-box下，border box 就是设定的 width → 阴影起点“看起来更靠里”，但坐标逻辑完全一致
性能与兼容性影响：box-shadow 硬件加速友好、IE9+ 全面支持；filter: drop-shadow() 虽能贴合 Alpha 通道，但依赖 GPU 加速，旧版 Safari 渲染不稳定。
真正要手动计算空间的地方，从来不是 box-shadow 本身，而是你是否在 JS 中做尺寸判断时忘了加上最大偏移和模糊半径，或者是否在父容器中忘了预留视觉余量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
