最有效解法是直接设父容器 overflow: visible，否则加 padding（值≥阴影外延距离）或用 gap 替代 margin；伪元素/transform 创建新层叠上下文为非常规兜底手段。
直接改父容器的 overflow: visible 最有效，但得同步处理它引发的布局副作用；如果不能动父容器样式，加 padding 是最常用兜底手段，但值必须算准，否则白加。
为什么 overflow: hidden 会切掉 box-shadow
阴影绘制在元素的 border box 外，而 overflow: hidden 的裁剪边界是 padding box 的内边缘——阴影根本没机会“进入”内容区，刚画出来就被物理裁掉。这不是渲染 bug，是 CSS 规范的严格执行。
常见现象：卡片设了 box-shadow: 0 4px 12px rgba(0,0,0,0.15)，父容器一加 overflow: hidden，底部阴影就消失；用开发者工具检查，阴影区域明明存在，但视觉上就是“断了一截”。
注意：overflow: auto 和 overflow: scroll 同样会裁剪；只要祖先链上某层同时满足 position ≠ static + overflow 非 visible，它就成为裁剪边界。
加 padding 能救，但必须满足两个硬条件
padding 生效的前提是：值 ≥ 阴影最大外延距离，且父容器未因 transform、opacity 或 will-change 隐式创建新层叠上下文（Safari 尤其敏感）。
- 外延距离 ≈
abs(offset-y)+blur-radius+spread-radius三者最大值，再加 2–4px 余量
例如box-shadow: 0 4px 12px 2px rgba(0,0,0,0.15)→ 至少padding: 18px - 若只裁底部，可只加
padding-bottom: 16px；四边都有阴影，就得四边都留空间 - 卡片用了
width: 100%或grid-column: span 2？必须同步设box-sizing: border-box，否则内容会被挤变形 - Flex/Grid 容器上加
padding可能拉高行高或压缩轨道尺寸，尤其当align-items: stretch或grid-auto-rows: minmax(0, 1fr)时
Flex/Grid 容器里别靠 margin 控制间距
给子项加 margin 是高频错误：首尾多出空白、与 overflow: hidden 冲突、阴影被切在边缘。而 gap 是原生间距机制，作用于轨道之间，不改变子项盒模型，完全绕过裁剪逻辑。
- 父容器设
display: flex; flex-wrap: wrap; gap: 16px - 子项清空所有
margin，只用padding控制内边距 - 避免同时用
gap和margin，会导致间距加倍或错位 - 大阴影（
blur-radius > 8px）会侵入gap区域，造成“被切开”的错觉——这不是裁剪，是视觉干扰，应控制阴影半径或改用margin替代gap
无法修改父容器时，用伪元素或 transform 创建新层叠上下文
当你面对第三方组件、封装好的卡片或模态框 body 区域，无法动 DOM 或父级样式时，才考虑这些非常规手段：
- 用
::before伪元素绝对定位 +inset: 0+transform: translateZ(0)模拟阴影，主元素只负责尺寸和定位 -
will-change: transform或transform: translateZ(0)可触发独立层叠上下文，让阴影在新层绘制，但 Firefox 和 Safari 表现不一，上线前必须真机验证 - 慎用
drop-shadow()：Safari 对它的裁剪逻辑更激进，尤其是配合transform: translateY()时，垂直方向阴影可能直接消失 - 终极排查法：用开发者工具逐层关闭祖先元素的
overflow，看哪一层恢复阴影——比盲目加padding更快定位问题点
真正稳定的解法永远是分层：把阴影逻辑从主元素抽离到伪元素，主元素只负责定位和尺寸；加 padding 看似简单，但容易因算错值、布局干扰或隐式层叠上下文而失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
