box-shadow本身不占布局空间，但会扩大渲染边界，影响line-height、overflow裁剪及伪元素布局。常见问题包括inline元素行高异常、父容器无法裁剪阴影、伪元素意外撑高容器。
box-shadow 不影响布局，但元素仍可能“占位”
很多人以为 box-shadow 是纯视觉效果、完全不占空间，结果发现加了阴影后旁边元素位置偏移了，或者父容器莫名撑高——其实不是阴影本身占位，而是触发了某些隐式布局行为。
常见错误现象：box-shadow 加在 display: inline 元素上，导致行高异常；或加在 position: relative 的块级元素上，父容器出现滚动条或空白间隙。
- 阴影本身确实不参与盒模型计算，
getBoundingClientRect()返回的尺寸也不含阴影 - 但阴影会扩大元素的“渲染边界”，影响
overflow: hidden的裁剪范围，也可能干扰line-height和基线对齐 - 如果元素有
transform或will-change，还可能触发层叠上下文，间接改变其他元素的堆叠和布局表现
inline 元素加 box-shadow 后文字错位
box-shadow 对 display: inline 元素的影响最隐蔽：它不改变行内盒尺寸，但阴影绘制区域会延伸到行框（line box）之外，而浏览器为了保证可读性，可能自动抬高整行的 line-height，造成视觉“占位”。
使用场景：给链接或图标加悬浮阴影时，发现文字上下跳动或行距变大。
立即学习“前端免费学习笔记（深入）”；
- 解决办法是显式设置
line-height和vertical-align，比如vertical-align: middle - 更稳妥的做法是把 inline 元素转为
display: inline-block，再加box-shadow，这样阴影不会扰动行框计算 - 避免对
span这类默认 inline 元素直接加较大扩散值（如box-shadow: 0 2px 10px rgba(0,0,0,0.2)）
父容器 overflow: hidden 裁不到 box-shadow
这是最常被误认为“虚假占位”的情况：明明设置了 overflow: hidden，阴影却依然显示在父容器外，看起来像父容器“没包住”子元素。
原因很简单：box-shadow 不属于元素的内容、内边距或边框，它绘制在层叠上下文的背景层之上，不受 overflow 控制（除非该元素自己建立了新的层叠上下文且父容器裁剪其整个层）。
- 验证方法：给父容器加
border: 1px solid red，看阴影是否溢出边框——大概率是的 - 若必须裁剪阴影，只能让子元素自身建立层叠上下文（如加
position: relative+z-index: 0），再配合父容器overflow: hidden，但仍有兼容性风险 - 更可靠的方式是用
clip-path替代，比如clip-path: inset(0)，它能真正裁掉阴影像素
伪元素阴影引发的意外高度
用 ::before 或 ::after 绘制阴影（比如模拟浮动卡片的底部投影）时，容易忽略伪元素默认是 display: inline，且未清除其生成内容的空白字符或基线位置。
性能影响不大，但布局极易失控：一个空的 ::after 加了 box-shadow 却让父容器多出几像素高度。
- 务必设置
content: ""+display: block（或inline-block）+position: absolute - 如果伪元素用于纯装饰阴影，建议加上
pointer-events: none避免干扰交互 - 不要依赖伪元素的默认尺寸——哪怕
width/height: 0，只要它参与流式布局，就可能因font-size或line-height留下空白
真正难处理的不是阴影本身，而是它如何与行框、层叠上下文、基线对齐这些隐式机制打交道。很多时候删掉一行 CSS 就好了，但得先知道删哪一行。
