CSS如何处理阴影元素产生的虚假占位

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 就好了，但得先知道删哪一行。