.rounded-circle仅设border-radius:50%，不保证圆形；需图片宽高相等、容器overflow:hidden且尺寸约束，否则呈椭圆或露图。
为什么 .rounded-circle 加了还是不圆？
因为 .rounded-circle 只负责写 border-radius: 50%，它不管宽高是不是相等、图片有没有溢出、容器有没有隐藏裁剪区域。你看到的是“椭圆”或“边缘露图”，不是 class 失效，而是它本来就不干这些事。
- 检查
<img alt="怎样在Bootstrap中实现圆形的头像裁剪效果_应用CSS的border-radius与overflow" >的width和height是否显式相等（比如都设为64），别只写width="64"留height为auto - 若用响应式单位（如
rem或百分比），确保父容器约束了宽高比，例如加style="aspect-ratio: 1 / 1" - 在 Flex/Grid 容器中，
align-items: stretch会撑高图片——给<img alt="怎样在Bootstrap中实现圆形的头像裁剪效果_应用CSS的border-radius与overflow" >加align-self: center或改用object-fit: cover配固定尺寸
必须同时设置 overflow: hidden 的位置在哪？
它得加在**承载图片的同一元素上**，不能分开写。很多人把 overflow: hidden 写在父 <div>，然后只给 <code><img alt="怎样在Bootstrap中实现圆形的头像裁剪效果_应用CSS的border-radius与overflow" > 加 .rounded-circle，结果图片边缘照样露出来。
- 正确写法：
<div class="rounded-circle overflow-hidden" style="width: 80px; height: 80px;"><img src="..." class="w-100 h-100 object-fit-cover" alt="怎样在Bootstrap中实现圆形的头像裁剪效果_应用CSS的border-radius与overflow" ></div> - 错误写法：
<div class="rounded-circle"><img src="..." class="overflow-hidden" alt="怎样在Bootstrap中实现圆形的头像裁剪效果_应用CSS的border-radius与overflow" ></div>——overflow: hidden在<img alt="怎样在Bootstrap中实现圆形的头像裁剪效果_应用CSS的border-radius与overflow" >上无效，浏览器不支持对替换元素直接裁剪 - Bootstrap 5 没提供
.overflow-hidden与尺寸类组合的预设，得自己拼：比如rounded-circle overflow-hidden w-12 h-12（需确认你项目里启用了h-*工具类）
object-fit: cover 和 background-image 方案怎么选？
核心区别在于语义、可访问性和控制粒度。<img alt="怎样在Bootstrap中实现圆形的头像裁剪效果_应用CSS的border-radius与overflow" > + object-fit 是标准做法，但某些老安卓 WebView 对它的 border-radius 裁剪支持不稳定；background-image 更稳，但牺牲了 alt 文本和 SEO。
- 优先用
<img alt="怎样在Bootstrap中实现圆形的头像裁剪效果_应用CSS的border-radius与overflow" >：加alt="张三的头像"，再配class="rounded-circle w-12 h-12 object-fit-cover"，并确保容器有overflow: hidden - 降级兼容 iOS 9 或 Android 4.4：改用容器背景图方案，
<div class="avatar"></div>，CSS 中定义width/height相等、border-radius: 50%、overflow: hidden、background-size: cover - 别混用：不要给
<img alt="怎样在Bootstrap中实现圆形的头像裁剪效果_应用CSS的border-radius与overflow" >同时设background-image和src，会导致资源重复加载
移动端小尺寸下边缘发虚或“闪方”怎么办？
这不是 bug，是 sub-pixel 渲染和动画重绘机制导致的视觉现象，尤其在 24px–40px 这类小尺寸圆形头像上明显。
立即学习“前端免费学习笔记（深入）”；
- 优先用偶数像素值：比如
width: 40px; height: 40px;，避免rem计算出39.5px这类非整数值 - 动画场景下慎用
border-radius过渡：改用transform: scale(1.1)缩放整个容器，更稳定 - 必要时加
transform: translateZ(0)强制 GPU 加速，但仅限已确认渲染异常的设备（iOS Safari 15.4 之前、部分三星旧机型），否则可能引发额外重绘开销
border-radius: 50% 当成“万能裁剪开关”——它只描边，不塑形、不缩放、不隐藏。真正让头像变圆的，是一整套配合：等宽高的容器、object-fit 控制内容、overflow: hidden 执行裁剪、还有对 DPR 和 sub-pixel 的实际妥协。
