父容器必须同时设置 position: relative 和 overflow: hidden 才能裁剪子元素圆角；仅 border-radius 或仅 overflow: hidden 无效，因绝对定位元素会脱离静态父容器的视觉边界。
父容器必须同时设 position: relative 和 overflow: hidden
只加 border-radius 或只加 overflow: hidden 都没用。绝对定位元素会无视父容器的视觉边界，直接往上找最近的已定位祖先——如果父容器还是 position: static（默认值），那它的 border-radius 就只是“画了个弧”，裁剪根本不会发生。
常见错误现象：.parent 宽 200px、border-radius: 12px，但子元素 position: absolute; top: 0; left: 0; 却从左上角直挺挺地“顶破”圆角，露出尖角或背景色。
-
.parent必须显式声明position: relative，这是创建「定位上下文」的最低要求 -
overflow: hidden必须和position: relative写在同一选择器里，不能拆到祖父级或兄弟元素上 - 别依赖 Flex/Grid 容器自动触发 BFC——它们不自带定位上下文，仍需手动补
position: relative
子元素尺寸和偏移必须主动约束，不能靠“默认填满”
position: relative 只是建了个坐标系，不负责管子元素长多大、往哪跑。哪怕父容器有 border-radius: 12px，子元素若没设 width/max-width 或写死了 right: -10px，照样溢出圆角区域。
尤其注意文本类内容：长单词、URL、未换行的中文段落，容易撑破右边界，导致右下角圆角被“捅穿”。
- 给子元素设
width: 100%或max-width: 100%，配合box-sizing: border-box - 用
word-break: break-word或overflow-wrap: break-word防止长内容硬撑 - 避免仅靠
transform: translate()调位置——它会创建新层叠上下文，overflow: hidden大概率失效
父容器背景色 + 子元素 margin/padding 冲突会导致“假溢出”
有时候元素明明没超出物理边界，但圆角边缘却出现一条细线、色块或间隙，看起来像“破角”。这往往不是定位问题，而是子元素自带的默认 margin（比如 p、h2）把自身推离了父容器内边，让父容器背景色在圆角处漏出来，再被 overflow: hidden 裁成一道线。
典型表现：父容器 background: #fff、border-radius: 8px，子 h2 顶在顶部，但右上角能看到一条白边或阴影断层。
- 统一重置子元素
margin: 0，尤其是标题、段落、列表等语义标签 - 检查子元素是否设置了
padding，它会让内容“缩进”，间接暴露父容器背景 - 如果子元素需要呼吸感，改用
margin-inline或padding-block等逻辑属性，避开圆角敏感区
iOS Safari 和部分安卓 WebView 中的 fixed 定位例外
如果子元素用了 position: fixed（比如悬浮按钮、返回顶部），哪怕父容器有 position: relative 和 overflow: hidden，iOS Safari 也大概率不裁剪——这是渲染引擎限制，不是你写错了。
此时强行套在圆角容器里，只会看到固定元素“浮”在圆角外，甚至遮挡其他内容。
- 这类元素必须脱离原 DOM 结构，挂到
下 - 用 JS 动态计算
top/left，或现代框架用Portal（React）/Teleport（Vue）提升节点 - 纯 CSS 方案可试
overflow: clip（Chrome 119+ / Firefox 111+ 支持），但 Safari 目前不支持
最常被跳过的一步，是打开浏览器开发者工具，右键检查子元素 → 查看 “Containing block” 是否真的指向你写的那个父容器。调十次 z-index 不如点开这一栏来得快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
