父容器 overflow: hidden 是阴影消失的头号原因，因其会物理裁剪子元素 box-shadow；解法包括改 overflow 为 visible、合理设置 padding、优先使用 gap 替代 margin，或在无法修改父容器时用伪元素/transform 创建新层叠上下文。
父容器 overflow: hidden 是阴影消失的头号原因
只要父元素设置了 overflow: hidden（或 auto、scroll），子元素的 box-shadow 就会被物理裁剪——不是没渲染，是刚画出来就被切掉了。这在卡片列表、轮播图、模态框 body 区域里高频出现。
最直接的解法就是把父容器的 overflow 改成 visible。但要注意：如果父容器是 display: flex 且 align-items: stretch，改完可能把子项“吸扁”，导致阴影又被压进边界；此时要同步加 align-items: flex-start 或 min-height: min-content。
别盲目信任“默认没设 overflow”——很多 UI 库（如 Ant Design、MUI）会在容器上隐式加 overflow: hidden 清浮动或防溢出，得用开发者工具逐层检查 computed 样式里的 overflow 值。
加 padding 能救，但必须算准值且避开布局陷阱
padding 生效的前提是：父容器没因 transform、opacity、will-change 等属性隐式创建新层叠上下文（尤其 Safari 对 translateZ(0) 更敏感）。它起作用是因为 overflow: hidden 裁的是 content box，而阴影只要落在 padding box 内就不算“溢出”。
padding 值不能凭感觉填，得按公式算：
- 取
box-shadow的blur-radius+abs(offset-y)+spread-radius三者最大值 - 再加 2–4px 余量（比如
box-shadow: 0 4px 12px 2px rgba(0,0,0,0.15)→ 至少padding: 18px） - 若父容器用了
box-sizing: border-box（默认），加 padding 会压缩内容区，卡片可能被挤变形 - Grid/Flex 容器内加 padding 可能拉高行高，尤其当
grid-auto-rows依赖内容高度时
Grid 和 Flex 里优先用 gap，别混用 margin
在 Flex/Grid 容器中，给子项加 margin 控制间距是常见错误：首尾多出空白、与 overflow: hidden 冲突、阴影被切在边缘。而 gap 是原生间距机制，作用于轨道之间，不改变子项盒模型，完全绕过裁剪逻辑。
正确做法：
- 父容器设
display: flex; flex-wrap: wrap; gap: 16px - 子项清空所有
margin，只用padding控制内边距 - 避免同时用
gap和margin，会导致间距加倍或错位 - 大阴影（
blur-radius > 8px）会侵入gap区域，造成“被切开”的错觉——这不是裁剪，是视觉干扰，应控制阴影半径或改用margin替代gap
伪元素或 transform 是黑盒场景下的兜底方案
当你无法修改父容器（比如第三方组件、封装好的卡片组件），才考虑这些非常规手段：
- 用
::before绝对定位 +filter: blur()模拟阴影，完全脱离box-shadow渲染路径 - 给子项加
transform: translateZ(0)或will-change: transform强制创建独立层叠上下文，让阴影在新层绘制（Chrome/Edge 稳定，Firefox/Safari 表现不一，上线前必须真机验证） - 用负
margin抵消裁剪（如margin: -8px），但会破坏grid-gap视觉节奏，慎用于响应式布局
真正容易被忽略的点是：阴影是否被裁，和 DOM 链路上**任意一层**祖先有关——只要某层同时满足 position ≠ static 且 overflow: hidden/auto/scroll，它就成了包含块兼裁剪边界。别只盯着直接父元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
