这类问题在前端布局中相当普遍：父元素设置了 overflow: hidden，子元素的 box-shadow 便被直接裁剪。很多开发者首先想到的就是添加 padding，但这种方法真的能从根本上解决吗？答案是可行的，但必须满足两个关键条件——padding 值需要大于或等于阴影的最大外延距离，同时父容器不能因 transform、opacity 等属性隐式创建新的层叠上下文。阴影的绘制区域位于 border-box 之外，而 overflow: hidden 裁剪的是 padding-box 的内边缘。添加 padding 并非修复某个 bug，本质上是在为阴影“腾出”物理空间，使其落在可视区域之内。
box-shadow被overflow:hidden裁掉，加padding真能解决问题吗
能，但必须满足前提条件。很多人只关注 blur-radius 就贸然添加 padding，比如 box-shadow: 0 4px 12px rgba(0,0,0,0.15)，实际阴影的外延约为 12px + abs(4px) = 16px，如果只加 padding: 8px，底部依然会被截断。更稳妥的计算方法是：取 blur-radius + abs(offset-y) 和 spread-radius 三者中的最大值，然后在此基础上再增加 2～4px 作为安全余量。
- 如果卡片使用了
width: 100%或grid-column: span 2，添加 padding 会压缩内容区域，必须同步设置box-sizing: border-box。 - 在 Grid 容器中添加 padding 可能导致整行高度变高，特别是当
grid-auto-rows依赖内容高度时。这种情况下，优先改用align-items: start结合min-height会更加灵活。 - Safari 对
transform: translateZ(0)触发的层叠上下文非常敏感，明明添加了 padding 但阴影仍然显示不出来？不要猜测，直接打开开发者工具，查看 computed 样式中 padding-box 的实际尺寸是否生效。
grid-item阴影被裁，不要修改父容器overflow属性
Grid 容器默认不设置 overflow 属性，但许多项目中会主动添加 overflow: hidden——可能是为了防止内容溢出，也可能是为了清除浮动，而这正是阴影消失的根本原因。最直接的解决方案是改回 overflow: visible，但需要注意：如果父级是一个 Flex 容器并设置了 align-items: stretch，它会把 Grid 容器“压扁”，阴影同样会被挤出边界。
真正需要排查的是 DOM 链路中的所有祖先节点：只要某一层同时满足 position != static 和 overflow: hidden/auto/scroll，它就会同时成为包含块和裁剪边界。使用开发者工具逐层关闭 overflow 来查看是哪一层在捣乱，比盲目调整 padding 试错要高效得多。
- 给 grid-item 添加
margin: -8px（对应阴影外延尺寸）可以暂时抵消裁剪，但会破坏grid-gap的视觉节奏，在响应式布局中需谨慎使用。 will-change: transform可以触发独立的层叠上下文，使阴影在一个新图层上绘制。在 Chrome 和 Edge 上表现稳定，但 Firefox 和 Safari 的表现不一致，上线前必须在真机上进行验证。- 尽量避免
grid-gap与较大的阴影同时使用。gap 本身是透明间隙，较大的阴影（例如blur-radius > 8px）会侵入 gap 区域，造成“阴影被切开”的错觉——这并非裁剪，而是视觉干扰。
绝对定位下拉菜单被截，问题不在于子元素本身
悬浮菜单显示不全，90% 的情况下并不是菜单代码写错了，而是它的某个祖先元素同时具备了 position: relative/absolute/fixed 和 overflow: hidden。这个祖先既是包含块，也是裁剪框——即使菜单的 top: -100px，也同样会被一刀切。
判断方法很简单：去掉这个祖先的 position 属性，如果菜单立即完整显示出来，那就确认是它在起作用。此时不要调整菜单的 z-index，因为没有用——z-index 受层叠上下文限制，而裁剪发生在渲染之前，根本不是同一个阶段。
- 最优方案：将菜单挂载到
body下面，使用ReactDOM.createPortal或document.body.appendChild()，然后通过 JS 动态计算位置。 - 次选方案：直接将祖先的
position改为static，前提是它没有依赖relative进行其他定位（例如图标对齐）。 clip-path或mask可以替代overflow: hidden实现视觉裁剪，并且不影响绝对定位的渲染。但 Safari 对clip-path加transform的组合支持较弱，移动端需谨慎使用。
阴影仍在但看起来断裂，可能是层叠顺序或视觉干扰
有时使用开发者工具 inspect 查看，阴影区域明明已经渲染出来，但视觉上却“缺了一角”。大概率不是被裁剪，而是被后渲染的兄弟元素遮挡了。Grid 中的 item 默认按照 DOM 顺序堆叠，前面的 card 阴影会被后面的 card 实体挡住——尤其是当后面的卡片没有设置 background 或使用了半透明背景时，这种遮挡效果会更加明显。
另一个隐形干扰源是 grid-gap：较大的阴影会跨 gap 渲染，相邻 item 的阴影在 gap 区域重叠并相互干扰，造成颜色加深或断裂的假象。这不是 bug，纯粹是叠加效果。
- 调整 DOM 顺序，将带阴影的 item 放在后面；或者统一给它们添加
z-index: 1（前提是父容器有层叠上下文）。 - 使用
margin替代grid-gap来控制间距，这样阴影只作用于 item 自身，不参与 gap 的计算，就不会产生冲突。 - 如果文字下伸部分（例如 g、y）被切掉——那是
line-height或min-height不足导致的，与阴影无关。添加 padding 无法解决，需要将line-height调整到 1.5 以上。
最棘手的情况是：既需要 overflow: hidden 来控制内容溢出，又希望阴影完整可见。此时 padding 只能算作权宜之计，真正需要调整结构——要么拆分容器职责（滚动容器与阴影容器各司其职），要么使用伪元素重绘阴影，绕过 box-shadow 的绘制路径。浏览器的渲染逻辑对“非布局空间的内容”处理非常固定，妥协点永远在于人，而不在于 CSS。
