加 .rounded-circle 不等于图片变圆，它仅设置 border-radius: 50%；真正实现正圆需同时满足宽高相等（如 aspect-ratio: 1/1）和内容不拉伸（如 object-fit: cover），并确保父容器 overflow: hidden。
加 .rounded-circle 不等于图片就变圆——它只设 border-radius: 50%，而是否显示为正圆，完全取决于图片渲染时的宽高比。
为什么 .rounded-circle 加了也不圆？
浏览器看到 .rounded-circle 就执行 border-radius: 50%，但这个规则对“形状”没要求：一张 1200×800 的图照样套上去，结果是椭圆，不是 bug，是 CSS 的正常行为。
- 常见错误：直接给带
.img-fluid的响应式图片加.rounded-circle→ 小屏下宽高比崩坏，圆角失效 - 父容器没约束尺寸，
<img>按比例缩放 → 实际渲染宽 ≠ 高 → 圆角只是“框圆”，内容被拉伸 - 用了
.rounded-pill却误以为是正圆 → 它是border-radius: 50rem，本质是超大圆角胶囊形，不依赖宽高比
真正让图片变圆的最小组合
必须同时满足两个条件：元素是正方形 + 内容不拉伸变形。Bootstrap 本身不自动裁图，得靠组合控制。
- 用
aspect-ratio: 1 / 1强制容器/图片为正方形（现代浏览器支持，IE 不兼容） - 配合
object-fit: cover让图片居中裁切，避免拉伸糊图 - 推荐结构：
<div class="rounded-circle overflow-hidden" style="aspect-ratio: 1 / 1; width: 80px;"><img class="w-100 h-100 object-fit-cover" src="..."></div> - 若需兼容旧版 IE，改用固定宽高 +
display: block+overflow: hidden，放弃aspect-ratio
.rounded 和 .rounded-2 等数值类怎么选？
这些类本质是预设 border-radius 值，v5 中对应 rem 单位（如 .rounded-2 = 0.5rem），比写像素更适配缩放，但不解决“正圆”问题。
立即学习“前端免费学习笔记（深入）”；
-
.rounded：默认0.25rem，适合卡片缩略图、非头像类图片 -
.rounded-2或.rounded-3：中等圆角，比.rounded更明显，适合需要柔和边界的头像容器 -
.rounded-0：显式设border-radius: 0，不是“没加类”，而是重置圆角，防继承干扰 - 别混用
.rounded-circle和.rounded-3—— 后者会被前者覆盖，因为50%优先级更高
卡片内图片圆角失效，90% 是漏了 overflow: hidden
给 .card-img-top 或 <img> 加了圆角，但边缘还是直的？大概率是父容器 .card 没设 overflow: hidden，导致溢出内容没被裁掉。
- Bootstrap 5 的
.card默认无overflow: hidden，必须手动加 - 加在
.card上比加在图片上更稳妥——能同时约束顶部图、底部图、浮动内容 - 如果用了
margin或自定义padding，注意box-sizing是否为border-box，否则overflow: hidden可能意外裁掉内边距区域
圆角看着简单，但真正落地时，aspect-ratio、object-fit、overflow: hidden 这三个点最容易被跳过——少一个，就不是圆，是椭圆、是白边、是错位。
