overflow:hidden必须与border-radius同时设在父容器上，否则圆角裁剪无效；真正导致“露边”“细缝”的主因是子元素默认margin、padding及box-sizing计算偏差，需显式重置margin:0并统一box-sizing:border-box。
overflow: hidden 必须和 border-radius 同时设置在父容器上，否则圆角裁剪无效；但光加这两行远远不够——真正导致“露边”“细缝”“尖角炸开”的，几乎全是子元素的默认 margin、padding 或盒模型计算偏差。
为什么 overflow: hidden 看似没起作用
浏览器对 p、h1–h6 等块级元素默认设置了上下 margin。这些 margin 不属于内容区域，overflow: hidden 裁不到它。结果就是：子元素被“推离”容器内边缘，在圆角处露出父容器背景色，形成一条细缝。
- 这种现象在深色背景+浅色卡片、或带阴影的 UI 中特别刺眼
-
overflow: hidden只裁内容区（content + padding），不裁 margin 区 - 如果子元素用了
display: flex或grid，还要检查gap、align-items: center是否引入了额外视觉间隙
必须显式重置子元素的 margin
不能依赖“看起来差不多”，必须精准控制。
- 对所有可能带默认外边距的子元素统一设
margin: 0，例如：h1, h2, h3, p, ul, ol { margin: 0; } - 若只针对某几个子元素，用类选择器更安全，比如
.card__title { margin-top: 0; margin-bottom: 0; } - 避免用
* { margin: 0; }—— 它会破坏表单控件、列表项等原生样式，引发新问题
box-sizing 和 width 的组合陷阱
当父容器有 padding，子元素又写了 width: 100%，实际渲染宽度 = padding + 100%，必然撑出边界。此时 overflow: hidden 是在裁“撑出来的部分”，不是你想要的圆角边界。
立即学习“前端免费学习笔记（深入）”；
- 统一设
*, *::before, *::after { box-sizing: border-box; }，让width包含padding和border - 子元素避免直接写
width: 100%；改用flex: 1（在 flex 容器中）或max-width: 100% - 若必须用固定
padding且子元素需贴边，可临时加margin: -Xpx抵消（仅限已知固定值，慎用）
Safari 下 border-radius + transition 溢出怎么办
Safari 渲染引擎在动画过程中会短暂“松动” overflow: hidden 的裁剪区域，导致圆角边缘内容闪出——这不是 bug，是硬件加速层切换时的视觉降级。
- 必须加
-webkit-mask强制补裁剪，例如：-webkit-mask: url("data:image/svg+xml,%3Csvg...rx='12'...%3E"); - SVG 中的
rx/ry值必须和 CSS 的border-radius数值完全一致（单位 px） - 务必同时写
-webkit-mask和mask，前者保 Safari，后者保标准兼容 -
will-change: transform可提升动画层，但不能替代-webkit-mask
真正难处理的从来不是怎么写 overflow: hidden，而是哪些地方的 margin、padding、box-sizing 和 display 组合会让裁剪失效——它们藏在默认样式里，不显式覆盖就永远存在。
