overflow: hidden 直接裁剪 box-shadow 是因阴影绘制在 border box 外，而裁剪边界是 padding box 内边缘；加 padding 可留出落点空间，但需满足外延距离要求且避免隐式层叠上下文；gap 比 margin 更安全，因其不触发裁剪。
overflow: hidden 为什么直接砍掉 box-shadow
因为 box-shadow 默认绘制在元素的 border box 外围，而 overflow: hidden 的裁剪边界是父容器的 padding box 内边缘——阴影还没“进入”内容区，就被物理切掉了。这不是 bug，是 CSS 渲染规范的严格执行。
常见现象：卡片写了 box-shadow: 0 4px 12px rgba(0,0,0,0.15)，父容器一加 overflow: hidden，底部阴影就齐刷刷消失；用开发者工具看 computed 样式，阴影声明还在，但渲染层被硬性裁掉。
-
overflow: hidden触发 BFC，裁剪范围严格限定在 padding box 内边缘 - 阴影不占文档流、不撑盒子，纯属“绘制层外挂”，没有独立逃逸通道
- 如果父容器还带
transform、opacity或will-change: transform，可能隐式创建新层叠上下文，在 Safari 中连 padding 区都会被裁
Flex 容器里加 padding 能不能救阴影
能，但必须满足两个硬条件：padding 值 ≥ 阴影最大外延距离，且父容器没因其他属性隐式创建新层叠上下文。它不是“修复”，而是给阴影留出物理落点空间。
- 外延距离 ≈
abs(v-offset) + blur-radius + spread-radius的最大值，再加 2–4px 余量
例如box-shadow: 0 4px 12px rgba(0,0,0,0.15)→ 至少padding: 16px - Flex 容器上加
padding会压缩子项可用空间，可能触发换行或拉高行高，尤其当子项用了width: 100%或flex: 1时 - 必须同步设
box-sizing: border-box，否则 padding 会额外撑大容器 - 响应式场景下固定
padding值风险高：小屏过大、大屏又不够，不如优先查哪一层真正在裁剪
为什么改用 gap 比加 margin 更安全
因为 gap 是 Flex/Grid 原生间距机制，它作用于轨道之间，不改变子项盒模型，完全绕过 overflow: hidden 的裁剪逻辑。而 margin 属于子项自身盒模型的一部分，一旦父容器裁剪，margin 边缘的阴影就首当其冲被切。
- 错误做法：每个卡片加
margin-right: 16px，导致右侧阴影被父容器overflow: hidden直接截断 - 正确做法：Flex 容器设
gap: 16px，卡片自身清空所有margin，只管padding和box-shadow - 兼容 IE？退回到
margin+:first-child/:last-child修正，但需注意首尾空白和裁剪风险
真正难搞的是多层裁剪叠加
实际项目中，阴影消失往往不是单一层的问题。DOM 链路上只要某层同时满足「position ≠ static」+「overflow: hidden / auto / scroll」，它就成为包含块兼裁剪边界。
用开发者工具逐层关闭 overflow 看哪一层生效，比盲目加 padding 更快定位问题点。特别留意第三方组件黑盒——它们常默认加 overflow: hidden，且你无法修改。
最隐蔽的干扰源是 transform：哪怕只是 transform: translateZ(0)，在 Safari 中也可能让裁剪范围扩大到 padding 区，此时 padding 就失效了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
