根本原因是子元素默认margin（如p、h1–h6的上下外边距）将其推离容器内边缘，使容器背景色在圆角处露出细缝；overflow:hidden只裁内容区不裁margin区，且易受padding、box-sizing、display等盒模型属性干扰。
圆角容器里内容“露边”或“多出一条线”，根本不是 overflow 写错了，而是 overflow: hidden 没起作用——它被子元素的默认 margin 或盒模型计算干扰了。
为什么 border-radius + overflow: hidden 有时不裁圆角
浏览器对 p、h1–h6 等块级元素默认设置了上下 margin。当这些元素放在圆角容器顶部/底部时，它们的 margin 会把自身“推离”容器内边缘，导致容器背景色在圆角处露出一条细缝——overflow: hidden 裁的是内容区域，不是 margin 区域。
这种“额外边框”现象在深色背景+浅色内容、或卡片类 UI 中特别明显。
- 必须把父容器的
overflow: hidden和border-radius同时生效，缺一不可 - 子元素的
margin（尤其是margin-top和margin-bottom）必须显式设为0 - 如果子元素用了
display: flex或grid，还要检查其内部项是否因gap或align-items产生视觉间隙
overflow: hidden 被 padding 或 box-sizing 干扰怎么办
当父容器设置了 padding，而子元素又用了 width: 100%，实际渲染宽度 = padding + 100%，必然溢出。此时 overflow: hidden 会裁剪，但裁的是“撑出来的部分”，不是你想要的圆角边界。
立即学习“前端免费学习笔记（深入）”；
更隐蔽的问题是 box-sizing：默认 content-box 下，width: 300px; padding: 20px 实际占宽 340px，圆角半径可能只应用在 300px 区域上，导致裁剪错位。
- 统一用
box-sizing: border-box，让width包含padding和border - 避免在圆角容器内直接写
width: 100%的子元素；改用flex: 1或max-width: 100% - 若必须用
padding，记得给子元素加margin: -20px抵消（慎用，仅限已知固定值场景）
移动端圆角滚动时出现锯齿或裁剪异常
iOS Safari 和部分 Android WebView 在 overflow: auto / scroll 容器上启用 border-radius 时，滚动过程中圆角边缘可能出现闪烁、锯齿或裁剪失效——这是渲染层对 overflow 和 border-radius 同时作用的兼容性限制。
这不是 bug，是硬件加速合成策略导致的视觉降级。
- 加
-webkit-overflow-scrolling: touch可缓解 iOS 滚动卡顿，但不能修复裁剪异常 - 更可靠的做法：用伪元素
::before或::after在容器内层叠一个同尺寸圆角遮罩 - 或者放弃容器圆角，改为子元素单独设
border-radius（如头像、标题栏），由内容自己“画圆”
真正难处理的从来不是怎么写 overflow，而是哪些地方的 margin、padding、box-sizing 和 display 组合会让它悄悄失效——尤其在嵌套较深或复用组件时，那条“多出来的线”往往藏在第 3 层子元素的默认样式里。
