box-shadow 不占用盒模型空间，不参与布局计算；其视觉“变大”是因溢出被裁或相邻元素无留白；模拟边框需 blur 为 0 且用 spread 控制粗细；多层阴影后写的在顶层；inset 阴影受 overflow 和 pointer-events 限制。
box-shadow 本来就不占用盒模型空间——它压根不参与 layout 计算，offsetWidth、getBoundingClientRect()、Flex/Grid 分布全都不认它。所谓“问题”，其实是误把视觉溢出当成布局侵占，或写法不当导致渲染异常。
为什么加了 box-shadow 元素看起来“变大”了？
不是它占空间，是阴影溢出后被父容器裁切，或相邻元素没留白，造成视觉压迫感。常见现象：
-
box-shadow: 0 4px 12px rgba(0,0,0,0.15)加完，卡片底下文字没被顶开 → 正常，它本就不推流 - 父容器设了
overflow: hidden，阴影突然消失 → 被硬裁了，不是“失效” - 用
border后再加box-shadow，发现外缘变厚 → 阴影起点在 border 外边缘，不是 content box
用 box-shadow 模拟边框时，必须关掉 blur
想让它像 border 一样锐利、像素对齐、缩放不抖，blur 必须为 0。哪怕 0.1px 也会触发高斯模糊插值，导致：
- Safari 中左右边粗细不一
- 125% 缩放时边缘断开或发虚
- 小数单位（如
0.5px）被四舍五入丢边
正确写法：box-shadow: 0 0 0 2px #333 —— 四个值缺一不可：h-offset、v-offset、blur、spread。
多层 box-shadow 的顺序和叠加逻辑
逗号分隔的多层阴影，**后写的在最上层**，这点和图层直觉相反，极易写反：
- 卡片常用“灰投影 + 白细边”：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 0 0 1px #fff→ 白边写后面才能压住灰影 - 想让某层“沉底”，就把它写在最前面；想“浮顶”，就写最后
- 漏掉逗号会导致整条声明被浏览器跳过，样式完全失效
内阴影 inset 的两个硬限制
box-shadow: inset 0 0 0 2px #333 确实不向外溢出，但它有明确边界约束：
- 受
overflow: hidden影响——父容器或自身设了该属性，内阴影可能被裁掉 - 不响应鼠标事件：
pointer-events: none是默认行为，无法像真实border那样扩大热区 - 深色背景上浅色
inset阴影容易发灰，需提高 alpha 值（如rgba(255,255,255,0.3)）
真正影响布局的从来不是 box-shadow 本身，而是你对它的使用方式——比如在已固定尺寸的容器里盲目叠加大 spread，又没预留 padding，结果内容被遮、阴影被裁，反而去调参数，绕远路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
