给父容器添加 overflow: hidden 可解决 border-radius 不裁剪内容的问题，因为 border-radius 仅影响边框和背景，不裁剪子元素；加上 overflow: hidden 后，超出圆角范围的内容将被自动裁切，实现视觉上的圆角效果。示例中.container 设置 border-radius 和 overflow: hidden 后，内部图片虽无圆角，但仍被裁剪为圆角矩形，适用于头像、卡片、轮播图等场景，确保内容不溢出，显示整齐统一。
当使用 border-radius 给一个容器设置圆角时，如果内部的内容（比如图片、子元素）超出了圆角范围，看起来就像“内容没跟着变圆角”，这时候最简单有效的解决方法就是给父容器加上 overflow: hidden。
为什么 border-radius 不裁剪内容？
border-radius 只是让元素的边框和背景呈现圆角效果，但默认情况下并不会裁剪溢出的子元素。如果内部的图片或元素没有设置圆角，它们会直接覆盖在圆角区域上，导致视觉上不一致。
用 overflow: hidden 解决圆角裁剪问题
给设置了 border-radius 的父元素添加 overflow: hidden，浏览器就会把超出圆角边界的内容自动裁掉，实现整齐的圆角显示效果。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.container {
width: 200px;
height: 200px;
border-radius: 20px;
overflow: hidden; /* 关键：裁剪溢出内容 */
border: 2px solid #ccc;
}
.container img {
width: 100%;
height: 100%;
object-fit: cover;
}
这样，里面的图片即使本身无圆角，也会被父容器的圆角边缘裁切，显示为完美圆形或圆角矩形。
常见应用场景
- 头像容器：圆形头像外框 + overflow: hidden 实现真圆裁剪
- 卡片组件：带圆角的卡片中包含图片或文字，防止内容溢出破形
- 轮播图/封面图：确保图片适应圆角容器，视觉统一
基本上就这些。只要记住：有 border-radius 的容器，想让内容也“变圆角”，就加 overflow: hidden，不需要给每个子元素都写 border-radius。简单又可靠。
