为什么CSS中设置了overflow:hidden依然能看到子元素投影

box-shadow 不被 overflow:hidden 裁剪，因其绘制在层叠上下文边界之外且发生在裁剪之后；可用 clip-path: inset(0)、padding 补空间或移至子元素实现视觉裁剪效果。

为什么css中设置了overflow:hidden依然能看到子元素投影_检查剪裁边界

overflow:hidden 为什么裁不掉 box-shadow

因为 box-shadow 默认绘制在元素的「层叠上下文边界之外」，而 overflow:hidden 的裁剪只作用于内容区域（content + padding + border），不包括阴影本身。即使子元素被裁掉，它的阴影仍按原始尺寸渲染并外溢显示。

常见错误现象：div 设了 overflow:hidden 和 box-shadow，里面一个 position:absolute 的按钮超出右边界，按钮被裁了，但阴影还露在外面；或者卡片加了圆角和阴影，右下角阴影被切掉一半，看起来像漏光。

根本原因：CSS 规范中 box-shadow 属于「绘制层（painting layer）」，发生在 overflow 裁剪之后，且不受父容器裁剪边界约束
真正生效的裁剪边界是「包含块（containing block）」+「BFC 边界」，而阴影不属于这个边界内的内容流
如果父容器同时设了 border-radius，box-shadow 默认不会跟着圆角走——它仍按矩形盒子投射，除非用 clip-path 或 mask 手动限制

如何让 box-shadow 也被裁掉

没有直接属性能“让 shadow 遵守 overflow”，只能绕过渲染机制，用视觉等效方式模拟裁剪效果。

MoltOverflow

Moltbots问答社区 - 提问编程问题，分享解决方案

下载

用 clip-path: inset(0) 替代 overflow:hidden：它对整个渲染盒（含 shadow）生效，Chrome 107+ / Firefox 111+ / Safari 16.4+ 可用；但注意它会覆盖 border-radius，需额外加 border-radius 到子元素或改用 mask
给父容器加 padding 补出阴影空间，再用 background-clip: padding-box 配合 overflow:hidden —— 这样阴影落在 padding 区，而 overflow 只裁 content，但视觉上阴影不外溢
把 box-shadow 移到子元素上（比如那个 absolute 按钮自己加 shadow），再确保该子元素完全在父容器内（通过 right: 0、transform: translateX(-8px) 等微调），避免它本身越界

transform 创建新裁剪容器时的阴影陷阱

当你给父容器加了 transform: translateZ(0) 或 scale(0.99)，它会隐式创建新的层叠上下文和裁剪容器（clipping container），此时 box-shadow 会被这个新容器裁剪——但裁剪边界不是你写的 width/height，而是 transform 后的几何边界，容易误切。

典型表现：放大缩小时，阴影突然消失或半截露出；移动端 touchmove 在该区域内失效（因裁剪容器拦截事件）
验证方法：打开 Chrome DevTools → Elements → Styles 面板，看 Computed 中是否出现 will-change: transform 或 transform 值非 none，且 Layout → “Clipping” 显示为 “Yes”
修复建议：如非必要，别用 transform 触发硬件加速来“解决性能问题”；若必须用，配合 clip-path 显式定义裁剪区，或改用 contain: layout paint 替代

真正难处理的不是 shadow 本身，而是它和 overflow、transform、border-radius 三者叠加时的渲染优先级——浏览器按规范一步步画，但人眼只看到“怎么又漏出来了”。动手前先开 DevTools 的 Rendering 面板勾选 “Paint flashing” 和 “Layer borders”，一眼就能看出哪些区域被哪个容器裁了。