border-radius 本身不裁切内容，必须配合 overflow: hidden 才能实现圆角裁切；仅设前者内容仍溢出，仅设后者为矩形裁剪，两者同用才按圆角路径裁切。
border-radius 本身不能“裁切”内容，它只控制边框和背景的圆角渲染；超出圆角区域的内容默认依然可见——这是开发者最常误用的地方。
为什么设置了 border-radius 却没裁掉图片或子元素？
因为 border-radius 不影响元素的盒模型边界（即 overflow 行为），子元素仍按原始矩形区域渲染。真正起裁切作用的是 overflow: hidden，且必须和 border-radius 同时作用于同一容器。
- 仅设
border-radius→ 边框变圆，内容照常溢出 - 仅设
overflow: hidden→ 内容被矩形裁剪 - 两者同时设置在父容器上 → 内容按圆角路径裁切
卡片内嵌图片/头像时的正确写法
常见错误是给 border-radius，这只能圆边框，无法解决图片宽高比不匹配导致的拉伸或溢出。应把图片作为子元素包裹在带样式的容器中。
.card {
border-radius: 12px;
overflow: hidden; /* 关键：缺一不可 */
background: #fff;
}
<p>.card img {
display: block;
width: 100%;
height: auto;
}</p>
- 不要对
img单独设border-radius（除非你明确只要图框圆、内容不裁） - 若需封面图铺满且居中，用
object-fit: cover替代width: 100% - IE 11 对
overflow: hidden+border-radius组合支持不稳定，慎用超大圆角（如50%）
圆角裁切与 clip-path 的区别在哪？
border-radius 裁切是基于盒模型的、性能友好的原生行为；clip-path 是更通用的裁切方式，但可能触发额外合成层，移动端滚动易掉帧。
- 要圆角卡片 → 优先用
border-radius + overflow: hidden - 要椭圆、三角、不规则形状 → 才考虑
clip-path: ellipse(...)或polygon(...) -
clip-path在 Safari 旧版本中需加-webkit-clip-path
真正让圆角“生效”的从来不是 border-radius 的数值大小，而是它是否和 overflow: hidden 形成配合；漏掉后者，再大的数值也只是画了个圆框而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
