overflow:hidden能裁掉box-shadow，因它裁剪的是padding box内边缘，而box-shadow绘制在border box外，属溢出内容；需padding≥blur-radius+abs(offset-y)+spread-radius最大值并加2–4px余量，且父容器不能隐式创建层叠上下文。
overflow:hidden 为什么能裁掉 box-shadow
因为 overflow:hidden 裁剪的是「padding box 内边缘」，而 box-shadow 默认绘制在 border box 外围——它根本不在内容区里，自然被当成溢出内容一刀切掉。
常见错误是只盯着 blur-radius 算 padding：比如 box-shadow: 0 4px 12px rgba(0,0,0,0.15)，实际外延 ≈ 12px + abs(4px) = 16px，只加 padding: 8px 还是会截断底部。
- 真正要满足的条件是：
padding≥blur-radius + abs(offset-y) + spread-radius的最大值，再加 2–4px 余量 - 如果父容器同时有
transform: translateZ(0)或will-change: transform，它可能隐式创建新层叠上下文，连padding区域都一起裁（Safari 尤其敏感） -
box-sizing: border-box下加padding会压缩内容宽度，grid/flex item 可能被挤变形，得同步检查布局逻辑
为什么 absolute 下拉菜单会被 overflow:hidden 截断
不是菜单写错了，是它的某个祖先元素同时满足两个条件：position ≠ static 且 overflow 是 hidden、auto 或 scroll——这时它就既是「包含块」又是「裁剪边界」，绝对定位子元素超出部分直接消失。
典型场景：导航栏用 .topnav { position: relative; overflow: hidden }，下拉菜单 .dropdown-content 设了 position: absolute; top: 100%，结果只显示半截甚至完全不见。
-
z-index再高也没用，裁剪发生在绘制层，不是层级问题 -
overflow: visible是唯一不触发裁剪的值，但无法滚动；若需滚动，得把滚动逻辑上移到更外层容器 - Flex/Grid 容器即使没显式设
position，也可能因transform或opacity隐式成为包含块，导致意外裁剪
哪些属性会悄悄加强裁剪效果
单设 overflow:hidden 已经够狠，但加上这些属性，裁剪会变得更“彻底”：
-
transform（哪怕只是translateZ(0)）→ 触发独立层叠上下文，阴影和绝对定位元素都被锁死在该上下文内 -
opacity: 0.99→ 同样创建新层叠上下文，Safari 中表现尤其激进 -
will-change: transform→ Chrome/Edge 支持尚可，Firefox 和 Safari 表现不一，上线前必须真机验证 -
clip-path或mask虽不干扰绝对定位渲染边界，但兼容性差，clip-path在 Safari 对 transform 元素支持不稳定
怎么快速定位是哪一层在裁剪
别猜，用开发者工具逐层关掉 overflow 看效果。重点检查 DOM 链路上所有祖先节点：
- 只要某层同时满足
position ≠ static+overflow: hidden/auto/scroll，它就是裁剪源 - Grid/Flex 容器默认不设
overflow，但很多项目会主动加来清浮动或防溢出——这正是阴影和菜单消失的根源 - 移动端 touchmove 失效、fixed 元素被切、动画中裁剪边界不同步更新，都是同一机制的衍生现象
真正难处理的不是加 padding 或改 z-index，而是当第三方组件黑盒封装、DOM 不能动、overflow 又不能改时，得靠 margin: -Npx 抵消或伪元素重绘阴影这类兜底手段——它们治标不治本，但有时就是唯一能上线的解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
