用 .rounded-circle 类实现圆形头像需确保图片宽高相等，推荐设 aspect-ratio: 1/1 并配合 object-fit: cover；注意 Bootstrap 3/4/5 类名差异、IE 兼容性及加载失败兜底。
用 .rounded-circle 类最简单，但必须注意宽高比
bootstrap 5 默认的 .rounded-circle 是靠 border-radius: 50% 实现的，它只在图片是正方形时才真正显示为圆；如果原图是 4:3 或 16:9 的矩形，加了类也只会是“椭圆头像”。
- 确保
<img>的宽高相等：比如设width="100" style="max-width:90%"，或用 CSS 强制aspect-ratio: 1 / 1 - 推荐搭配
.img-fluid（响应式）时，额外加object-fit: cover防止拉伸变形 - 别依赖原图自带比例——上传头像尺寸千差万别，服务端裁剪或前端
clip-path补救都比硬塞非正方形图靠谱
Bootstrap 4 和 5 的类名不兼容，别混用
Bootstrap 4 用的是 .rounded-circle，但 Bootstrap 3 用的是 .img-circle；如果你项目还在用 v3 升级到 v5，直接替换类名会失效，因为旧类已被移除。
- v3 → v4/v5 升级时，批量搜索替换
img-circle为rounded-circle - v4 中
.rounded是圆角矩形，.rounded-circle才是真圆形；v5 完全沿用这套命名，没变化 - 别在同一个项目里同时引入 v3 和 v5 的 CSS，
border-radius冲突会导致样式错乱，尤其是缩略图边框和圆角叠加时
想加阴影/边框/居中？别堆 class，先理清职责
.rounded-circle 只管形状，其他视觉效果得靠别的 utility 类配合，但顺序和组合有讲究。
- 居中用
mx-auto d-block，不是text-center—— 后者对 inline 元素才生效，而<img>默认是 inline，不加d-block就居不了中 - 加灰色边框和内边距，用
.img-thumbnail，但它自带padding: 0.25rem和border，和.rounded-circle可共存，但视觉上会“压住”圆角边缘，建议优先选其一 - 阴影用
style="box-shadow: 0 0 8px rgba(0,0,0,.15)"，别用.shadow等通用类——那些是为卡片设计的，对图片常出现高度塌陷或溢出
IE11 及更老浏览器不支持 border-radius: 50%，别假装它能跑
哪怕你用了 .rounded-circle，IE11 以下（包括 IE10、IE9）根本不会渲染圆角，图片还是方的。这不是 Bootstrap 的 bug，是 CSS 特性本身不支持。
- 如果业务还要求兼容 IE11，可以加一层 fallback：
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='...', sizingMethod='scale');，但极难维护，基本没人真用 - 更现实的做法是：检测
document.documentMode，对老 IE 显示一个带圆角背景色的<div> + 里面居中的 <code><img>，放弃纯 CSS 圆形 - 现在绝大多数新项目已明确不支持 IE，但上线前仍建议用 BrowserStack 快速验证下目标环境是否真没人在用老内核 实际做头像时，最常被忽略的是图片加载前的占位和加载失败的兜底——
.rounded-circle 对空 src 或 404 图片无效，会显示浏览器默认的破碎图标，还是方的。
