rounded-circle实现正圆需图片宽高相等，否则拉伸变形；rounded为轻微圆角，rounded-pill为胶囊形；IE11需display:block且避免overflow:hidden与transform共存。
用 rounded 类控制图片圆角，不是所有圆角都叫 rounded-circle
Bootstrap 的图片圆角靠预设类实现，但不同类效果差异明显：rounded 是轻微圆角（border-radius: 0.25rem），rounded-pill 是超大圆角（接近胶囊形），而真正「正圆」效果必须用 rounded-circle —— 它强制设置 border-radius: 50%，且要求图片宽高相等，否则会拉伸变形。
-
rounded：适合卡片缩略图、头像框（非正圆）等常规场景 -
rounded-circle：只对正方形图片生效；若原图是 4:3，得先用object-fit: cover裁剪或提前处理尺寸 -
rounded-0可显式关闭圆角，避免继承父容器样式干扰
图片宽高不一致时，rounded-circle 会出怪状
直接给一张 800×600 的 JPG 加 rounded-circle，浏览器会把它压成正圆，但内容被严重挤压变形。这不是 Bug，是 CSS 的预期行为 —— border-radius: 50% 只管「外框」，不管内部内容怎么适配。
- 必须确保容器或图片本身是正方形：用
width: 100px; height: 100px;或aspect-ratio: 1/1（注意 IE 不支持） - 配合
object-fit: cover防止拉伸：<img src="avatar.jpg" class="rounded-circle" style="width: 100px; height: 100px; object-fit: cover;">
- 如果用
img-fluid响应式类，要小心它会重置宽高，rounded-circle效果可能在小屏消失
自定义圆角值？别动 border-radius，改 Bootstrap 变量更稳
想让圆角比 rounded 更大一点，又不想写一堆 !important 覆盖默认样式。Bootstrap 5+ 支持通过 Sass 变量统一调整，比如把 $border-radius 从 0.25rem 改成 0.375rem，所有 rounded 类都会同步变化。
- 直接覆盖 CSS 有风险：某些组件（如
btn、card）也依赖这些圆角值，单独改img的border-radius可能破坏整体一致性 - 如果只是局部需要，推荐用内联样式或自定义类：
<img src="..." class="rounded" style="border-radius: 0.5rem;">
- 注意：Bootstrap 4 和 5 的
$border-radius-lg默认值不同（4 是0.3rem，5 是0.5rem），升级时圆角视觉会变
IE11 下 rounded-circle 显示异常的常见原因
IE11 对 border-radius: 50% 支持有限，尤其当图片是内联元素或父容器有 overflow: hidden 时，圆角常被裁掉一角，或显示为椭圆。
- 确保图片是块级元素：
display: block（img默认是 inline，IE 下border-radius对 inline 元素支持差） - 避免父容器同时设
overflow: hidden和transform（比如scale()），这在 IE11 中极易触发渲染 bug - 最稳妥的降级方案：用
rounded+ 稍大border-radius值替代，不强求正圆
object-fit 或 display: block 这种关键细节。 
