flex子元素默认min-width:auto会绕过overflow:hidden裁剪，需设min-width:0；transform动画可能解除裁剪上下文，应加transform:rotate(0deg)修复；子元素margin和width计算错误也会导致圆角失效。
不是 overflow: hidden 写错了，也不是 border-radius 没生效——而是圆角容器内部的子元素在 Flex 布局下“撑破”了裁剪边界，导致视觉上圆角被顶开或露出背景缝。
Flex 子项默认 min-width: auto 会绕过 overflow 裁剪
Flex 直接子元素默认带 min-width: auto（主轴为 row 时），它强制元素宽度不小于内容自然宽。哪怕你写了 overflow: hidden，浏览器也优先保内容完整，根本不会触发裁剪逻辑。
- 典型现象：圆角容器底部/顶部出现细缝，露出父容器背景色；
text-overflow: ellipsis不显示；长文本或图片把圆角“顶平” - 检查方式：DevTools → Computed → 查
min-width，若值仍是auto，就是它 - 必须加在需要截断的**Flex 直接子元素**上，写成
min-width: 0（不能是0px或0%）
overflow: hidden + border-radius 在 Flex 容器里被“分层失效”
当父容器是 display: flex，且自身又设了 border-radius 和 overflow: hidden，它的子元素若再用 transform（如 scale、translateZ）做动画，WebKit/Blink 引擎可能临时解除裁剪上下文——圆角边缘内容直接溢出。
- 只在 Safari（macOS 14+/iOS 17+）和部分 Chrome 明显，Firefox 通常不受影响
- 解决方法：给父容器加
transform: rotate(0deg)，强制升格为合成层，绑定裁剪生命周期 - 别加在子元素上，否则无效；若已用
translateZ(0)或will-change，不必重复加
子元素 margin/padding + box-sizing 组合干扰圆角渲染边界
圆角容器里放 p、h2 这类块级元素，它们自带 margin-top/margin-bottom，会把自身“推离”容器内边缘——overflow: hidden 只裁内容区，不裁 margin 区，结果圆角处漏出背景细缝。
- 解决：对这些子元素显式设
margin: 0，尤其注意顶部/底部第一个和最后一个 - 若容器有
padding，子元素又用了width: 100%，实际宽度 =padding + 100%→ 必然溢出；改用max-width: 100%或flex: 1 - 统一用
box-sizing: border-box，避免content-box下 width 计算错位导致圆角应用区域偏移
真正难处理的从来不是怎么写 border-radius，而是哪一行 margin、哪一层 min-width、哪个 transform 触发了裁剪上下文的松动——这些组合往往只在特定设备或动画帧中暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
