box-shadow天然不占空间，因其仅为绘制层视觉效果，不参与盒模型计算，故getboundingclientrect()、offsetwidth及flex/grid布局等均无视它，如同在元素上覆盖半透明胶片，胶片再厚也不改变盒子尺寸。
box-shadow 为什么天然不占空间
因为 box-shadow 是纯绘制层效果，不参与盒模型计算——getBoundingClientRect()、offsetWidth、Flex/Grid 分布、甚至 margin-collapse 都完全无视它。它就像在元素“上面”盖了一层半透明胶片，胶片再厚，盒子本身尺寸纹丝不动。
常见错误现象：box-shadow: 0 4px 12px rgba(0,0,0,0.15) 加完发现卡片没把下面文字顶开，以为“失效了”；其实是它真·没动布局，隔壁元素也没被推走。
真正会挤空间的是：border（改 box-sizing 也救不回已占的尺寸）、padding、或误加的 margin。别把视觉“变重”错当成“变大”。
用 box-shadow 模拟边框时必须关掉 blur
想用 box-shadow 替代 border 又不抖动，关键不是“能不能”，而是“怎么写才对”。只要带 blur，哪怕 0.5px，就会因亚像素渲染导致边缘发虚、缩放下断边、甚至在 Safari 中左右边粗细不一。
正确写法必须同时满足：
-
h-offset和v-offset都为0（否则阴影中心偏移，不像边框） -
blur严格为0（禁用模糊，确保锐利） - 只靠
spread控制“粗细”，例如box-shadow: 0 0 0 2px #333 - 避免小数单位（如
0.5px），尤其在 125% 缩放下会被四舍五入丢边
多层阴影叠加顺序容易写反
CSS 解析多层 box-shadow 是从左到右、**后写的在最上层**，这点和 z-index 或图层堆叠直觉相反。比如：
.card {
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 0 0 1px #eee;
}
这里 0 0 0 1px #eee（细白边）在最上，能压住外层灰影；如果调换顺序，白边就被盖住了，看起来像没生效。
实用场景：
- 卡片底部投影 + 顶部细高光：投影写前面，高光写后面
- 双色外框：深色 spread 大的在下，浅色 spread 小的在上
- hover 时加一层内凹 inset 阴影：必须写在最后，否则被外阴影盖掉
阴影被裁剪不是因为它占空间，而是 overflow 设置问题
父容器设了 overflow: hidden，阴影突然没了——这不是 box-shadow “被挤出去”，是它被硬生生剪掉了。外阴影默认不受子元素 border-radius 或 clip-path 影响，但绝对服从父级 overflow 规则。
解决方式不是调 box-shadow 参数，而是检查父容器：
- 确认是否非必要加了
overflow: hidden（很多框架组件默认加） - 若必须裁内容，又想留阴影，把
box-shadow移到伪元素上：::after定位 +pointer-events: none - 用
inset阴影替代？注意它会被overflow: hidden裁得更狠，且不随圆角自然延伸
真正难处理的点在于：阴影“存在”和“可见”是两回事。它可能一直在那儿渲染，只是你根本看不到——连 DevTools 的 Layout 网格都标不出它的位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
