圆角“失效”实为overflow:hidden对脱离常规流的absolute/fixed子元素裁剪失效，根本原因是其未以该父容器为包含块或层叠上下文被破坏；需检查定位上下文、层叠上下文及祖先链overflow值。
圆角失效不是定位元素“破坏”了 border-radius，而是 overflow: hidden 在定位元素参与渲染时被浏览器静默忽略或降级——真正出问题的是裁剪逻辑没生效，不是圆角没写。
为什么 absolute/fixed 元素会让父级 border-radius 看起来“失效”
父容器设了 border-radius 和 overflow: hidden，本意是裁掉超出圆角区域的内容。但一旦子元素用了 position: absolute 或 position: fixed，且其渲染层脱离了父容器的包含块（containing block）或层叠上下文，overflow: hidden 就无法对其生效——它只裁剪“属于这个块”的内容，而绝对定位元素可能已升维到更高图层。
常见现象：头像带圆角的卡片里，一个 position: absolute 的角标图标从右上角“穿出”，边缘生硬直角；下拉菜单弹出时，顶部圆角被截断成平边。
- 不是
border-radius没起作用，是overflow: hidden对该子元素根本没执行裁剪 - 关键判定条件：子元素是否以该父容器为包含块？若父容器没设
position: relative/absolute/fixed，那它的包含块可能是更上层元素，甚至 -
transform: translateZ(0)、will-change: transform或filter也会触发新层叠上下文，间接让overflow: hidden失效
怎么确认是不是 overflow 没生效
别只看样式面板写了 overflow: hidden，要验证它是否真在计算中起作用：
- 选中父容器 → DevTools 「Computed」面板 → 查看
overflow-x和overflow-y的最终值，确认不是被其他规则覆盖（比如overflow-x: visible单独声明） - 临时删掉父容器的
overflow声明，观察绝对定位子元素是否“突然变大”或位置偏移——如果无变化，说明它本来就不受这层裁剪 - 给父容器加
outline: 2px solid red，再滚动/交互，看子元素是否真的超出 outline 范围却未被裁剪 - 检查父容器是否有
transform、filter、perspective或will-change——这些属性会创建新层叠上下文，使overflow失效范围扩大
不改 DOM 结构，怎么保住圆角又显示定位元素
硬删 overflow: hidden 会破圆角视觉，但直接加 clip-path: inset(0) 又不能解决所有场景。更稳妥的做法是分情况处理：
- 若子元素必须留在父 DOM 内（如第三方组件限制），用
clip-path: inset(0 round 8px)替代overflow: hidden：它能精确匹配border-radius值，且不影响定位元素的渲染层级（Chrome 93+、Firefox 97+、Safari 15.4+ 支持） - 若父容器只是为清除浮动或建立 BFC 才加
overflow: hidden，改用display: flow-root——它不触发裁剪，但能防止塌陷，圆角照常渲染 - 对
position: absolute子元素，确保父容器有position: relative，并显式设置z-index避免被其他层遮挡导致“错觉失效” - 极端情况（如 iOS Safari 15.3 及更早）：加
transform: translateZ(0)到父容器，强制其成为独立合成层，反而能让overflow: hidden对子元素重新生效（但慎用，有 GPU 内存开销）
最容易被忽略的一点
失效往往不在直接父级，而在爷爷级或更高层——比如一个 .card 外面包着 .modal-body，后者悄悄加了 overflow: hidden 用于防动画穿出，结果整个卡片的圆角和弹层都“漏边”。调试时必须从 sticky/absolute 元素开始，逐级向上点开 DOM 树，每层都看 computed overflow 和 transform，而不是只盯父元素的 Styles 面板。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
