box-shadow被父容器裁切的典型表现是阴影仅部分显示，主因是父元素overflow非visible或未预留绘制空间；应优先检查并设overflow:visible，其次才考虑按公式padding≥2×max(blurradius,spreadradius)补位。
box-shadow被父容器裁切的典型表现
盒子明明写了 box-shadow，但只显示上半部分或左右露不出来——八成是父元素没设 overflow: visible，或者自身没留出绘制空间。浏览器渲染阴影时，它属于“溢出内容”，一旦父容器 overflow 是 hidden、auto 或 scroll，阴影就会被直接砍掉。
为什么加 padding 不总是管用
给父元素加 padding 确实能腾出空间，但容易踩两个坑：
- padding 值必须 ≥ 阴影的
spread radius+blur radius之和（例如box-shadow: 0 4px 12px 6px rgba(0,0,0,0.15)，总外扩至少 18px） - 如果父元素用了
box-sizing: border-box（默认），padding 会压缩内容区，可能挤坏子元素布局 - 响应式场景下，固定 padding 在小屏可能过大，大屏又不够——不如让父容器主动“允许溢出”
- 确保父元素没有
overflow: hidden（尤其警惕框架组件自带的封装容器） - 若父元素是
position: relative且需保留定位上下文，可加overflow: visible显式声明 - 若父元素本身是
display: flex或grid，注意其默认不截断，但子项若设了overflow: hidden仍会剪掉阴影 - 极端情况（如模态框、卡片网格），可在带阴影的子元素上加
position: relative+ 微调z-index，避免被兄弟元素遮挡 - 计算公式：最小
padding=Math.max(blurRadius, spreadRadius) * 2（保守起见乘以 2，覆盖各方向） - 推荐用
padding而非margin，因为 margin 不影响父容器的“内容区域边界”，对溢出裁切无效 - 别忘了检查祖先链上所有有
overflow设置的节点——阴影可能在第 3 层父级就被截了
更稳妥的解法：控制 overflow 和定位上下文
比起硬调 padding，优先检查并调整父级的渲染上下文：
需要加 padding 的真实场景
只有当无法修改父元素 overflow（比如用的是第三方 UI 库的黑盒组件），才退而求其次用 padding 补位：
立即学习“前端免费学习笔记（深入）”；
实际项目里，90% 的 shadow 裁切问题根子不在子元素，而在某个看不见的包裹层悄悄加了 overflow: hidden。先开开发者工具逐层 hover 看 computed overflow，比盲目加 padding 快得多。
