rounded类仅提供固定0.25rem圆角，非万能；要正圆需宽高等比+object-fit-cover或容器裁切，且注意flex/grid中align-items: stretch干扰及ie11兼容限制。
rounded类不是万能圆角，它只设0.25rem固定值
加了rounded却看不出明显弧度？不是你眼花，是它本就只给0.25rem（约4px）的圆角，适合卡片缩略图或轻微柔化边框，不适合头像或强调视觉焦点的场景。
它等价于border-radius: 0.25rem，不随图片尺寸缩放，也不响应断点变化。想更大一点？别硬加!important覆盖，容易波及btn、card等组件的统一圆角风格。
-
rounded-0：显式关闭圆角，比删class更可靠，尤其在继承父容器样式时 -
rounded-1～rounded-3：对应0.25rem、0.5rem、0.75rem，数值越大越“软”，但依然不是圆形 -
rounded-pill：50%圆角，宽高不等时会拉成胶囊形，用在横幅按钮或标签上还行，头像慎用
rounded-circle要正圆，必须宽高等比+object-fit-cover
直接给一张400×300的图片加rounded-circle，结果是个压扁的椭圆——这不是Bug，是CSS对border-radius: 50%的正常渲染：它只管外框，不管内容怎么塞。
真正出圆的前提只有一个：图片渲染区域必须是正方形。否则再多个!important也没用。
- 最简方案：
<img src="avatar.jpg" class="rounded-circle" style="max-width:90%"> - 响应式写法：用
aspect-ratio: 1 / 1配合width控制大小，object-fit: cover保证居中裁切（IE不支持） - 兼容旧版方案：套一层
<div class="rounded-circle overflow-hidden"><img class="w-100 h-100 object-fit-cover"></div>，靠容器裁出圆
Flex/Grid容器里rounded-circle失效？先看align-items
在display: flex或display: grid的父容器中，图片突然变方、圆角消失，大概率是align-items: stretch在作祟——它强制拉高图片高度，破坏了宽高比。
哪怕你写了width: 100px; height: 100px，Flex默认的stretch行为仍可能覆盖内联样式，尤其当父容器有min-height或flex: 1时。
- 临时修复：给
<img>加align-self: flex-start或align-self: center - 根治办法：父容器设
align-items: flex-start或align-items: center，避免默认stretch干扰 - 别依赖
img-fluid：它带height: auto，和rounded-circle天然冲突，小屏下极易变形
IE11下rounded-circle显示异常，别怪Bootstrap
IE11对border-radius: 50%的支持不完整，尤其当图片是inline元素（<img>默认就是）或父容器有overflow: hidden时，常出现一角被裁、边缘锯齿、甚至退化为椭圆。
这不是Bootstrap的锅，是浏览器引擎限制。强行兼容成本远高于收益，多数项目已明确放弃IE支持。
- 必须兼容时：确保
<img>是块级元素，加style="max-width:90%" - 避免组合陷阱：别让
overflow: hidden和transform（比如scale()）同时作用于同一父容器 - 兜底思路：用
document.documentMode检测IE，降级为带圆角背景色的<div>包裹居中图片 实际项目里，最常卡住人的不是“怎么加圆角”，而是“为什么加了不像圆”。宽高比、布局上下文、浏览器能力这三点，漏掉任何一个，<code>rounded-circle都只是个幻觉。
