box-shadow 不被 overflow:hidden 裁剪，因其绘制在层叠上下文边界之外且发生在裁剪之后；可用 clip-path: inset(0)、padding 补空间或移至子元素实现视觉裁剪效果。
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”，只能绕过渲染机制，用视觉等效方式模拟裁剪效果。
- 用
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”，一眼就能看出哪些区域被哪个容器裁了。
