bootstrap图片圆角由rounded系列类控制，其中rounded-circle仅在图片宽高相等时生成正圆，否则拉伸为椭圆；需配合width/height、object-fit:cover或容器overflow-hidden+裁切方案确保效果。
直接说结论：Bootstrap 的图片圆角靠 rounded 系列类控制，但 rounded-circle 不是“一键变圆”，它只生效于宽高相等的图片；强行加在矩形图上会拉伸变形，不是 Bug，是 CSS 行为预期。
为什么加了 rounded-circle 还是椭圆？
根本原因是图片原始尺寸不是正方形。比如一张 800×600 的 JPG，border-radius: 50% 只会让外框变成正圆，内部图像仍按原比例拉伸填充，结果就是压扁的椭圆。
- 必须确保
<img>元素本身宽高相等：用style="max-width:90%"或 Bootstrap 尺寸类如h-100 w-100 - 更稳妥的做法是用容器裁切：
<div class="rounded-circle overflow-hidden"><img class="w-100 h-100" src=""></div> - 配合
object-fit: cover防止内容被拉扯失真（记得加在<img>上，不是容器） - 别依赖
img-fluid：它会重置宽高为max-width: 100%和height: auto，破坏正方形前提
rounded、rounded-pill、rounded-circle 到底怎么选？
三者语义和用途完全不同，混用容易出视觉偏差。
-
rounded：默认值border-radius: 0.25rem，适合卡片缩略图、列表头像框这类需要轻微柔化边角的场景 -
rounded-pill：等价于border-radius: 50%水平方向 +0垂直方向，本质是「胶囊形」，宽高不等时会拉成椭圆，**不适合头像** -
rounded-circle：真正强制border-radius: 50%，但只在正方形前提下产出正圆；若需响应式头像，得组合断点类（如rounded-circle d-none d-md-block）或用aspect-ratio: 1/1（注意 IE 不支持）
卡片内图片圆角失效，90% 是漏了 overflow-hidden
给 .card-img-top 加 rounded-top 或直接写 border-radius，常发现圆角“没切干净”——顶部有弧度，左右或底部还露直角。这不是样式没生效，而是卡片容器没裁切溢出内容。
- 必须在
.card（或包含图片的直接父容器）上同时加overflow: hidden - Bootstrap 5 默认
.card没设overflow，得手动补；只加在图片上没用 - 如果用了自定义 padding 或负 margin，可能让图片实际渲染区域超出容器边界，触发意外裁切
- 调试时可临时加
outline: 1px solid red到.card上，看清真实容器范围
IE11 及更老浏览器的兼容性现实
别指望 rounded-circle 在 IE11 下显示正圆。它对 border-radius: 50% 支持极差，尤其当图片是 inline 元素或父容器有 overflow: hidden 时，常出现缺角、椭圆或完全无效。
- 强制
display: block能缓解部分问题，但无法解决根本限制 - 不推荐用
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader这类 IE 专属滤镜，维护成本高且效果不可控 - 更实际的 fallback：检测
document.documentMode，对 IE11 显示一个带圆角背景色的<div>，里面居中放图片，放弃纯 CSS 圆形 <p>真正难的不是加哪个类，而是判断这张图该不该圆、在哪一层裁、要不要考虑加载失败或尺寸异常。很多项目卡在“头像上传后变形”，其实问题不在 Bootstrap，而在没把尺寸约束逻辑前置到上传预览或服务端裁剪环节。</p> </div>
