必须同时设置 border-radius 和 overflow: hidden 才能裁剪子元素，因 border-radius 仅影响边框和背景绘制，不改变渲染裁剪边界；overflow: hidden 依赖 border-radius 定义的形状裁剪。
单独加 border-radius 不会裁剪子元素，必须配 overflow: hidden 才能真正“框住”内容。这不是可选项，是必要条件。
为什么 border-radius 本身不裁剪子元素
CSS 规范里，border-radius 只影响元素自身的边框、背景和轮廓绘制区域，它不改变渲染层的裁剪边界。子元素（比如 img、div、绝对定位块）默认仍按矩形容器的原始几何边界渲染，圆角只是“视觉遮罩”，不是物理裁剪线。
常见错误现象：
- 卡片设了
border-radius: 12px，但内部图片四角还是直的 - 轮播箭头用
position: absolute放在右上角，结果从圆角外侧“捅出来” - Safari 中背景渐变或图片边缘明显溢出，Chrome 看着正常
overflow: hidden 必须和 border-radius 同时生效
overflow: hidden 的裁剪行为依赖于容器当前的边界形状——而这个形状由 border-radius 定义。二者缺一不可。
实操要点：
- 不能只给父容器写
overflow: hidden却忘了加border-radius，否则仍是矩形裁剪 - 如果父容器有
transform（如scale()或translateZ(0)），可能创建新层叠上下文，导致 Safari 下裁剪脱钩；可加isolation: isolate或will-change: transform强制同步 - 子元素若用了
position: absolute且top/left超出内边距范围，会被直接砍掉——这是预期行为，不是 bug
替代方案：什么时候该换用 background-clip: padding-box
如果你只希望背景色或渐变贴合圆角内侧，又不想裁剪子元素（比如要保留悬出的阴影或伪元素），background-clip: padding-box 比 overflow: hidden 更轻量、副作用更少。
但要注意限制条件：
- 必须有实线边框（
border: 1px solid #000），dashed/dotted 边框在旧版 Safari 中可能异常 - 边框宽度需 ≥ 1px，否则无效果
- 必须显式声明：
background-clip: padding-box，不能依赖默认值 - 对
background-image（如渐变）有效，但对子元素完全无效
Safari 下动画圆角的隐藏陷阱
仅靠 border-radius + overflow: hidden 做 :hover { transform: scale(1.05) }，Safari 极易在动画帧中短暂失效，“破框”闪现。
最稳兜底法是加 WebKit 专属掩码：
-webkit-mask: radial-gradient(circle at top left, transparent 12px, #000 12px) top left / 100% 100%;
其中 12px 必须与 border-radius 值严格一致；四个方位（top left 等）需按实际圆角位置调整。
圆角裁剪不是“设了就完事”的属性组合，它在不同浏览器、不同子元素定位方式、不同动画上下文中表现差异很大。最容易被忽略的是：裁剪是否生效，取决于整个渲染链路——从父容器的层叠上下文，到子元素的定位模式，再到浏览器对 overflow 和 border-radius 的协同实现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
