.rounded-circle仅设border-radius:50%，不保证圆形；需图片宽高相等、容器overflow:hidden且尺寸约束，否则呈椭圆或露图。

为什么 .rounded-circle 加了还是不圆？

因为 .rounded-circle 只负责写 border-radius: 50%，它不管宽高是不是相等、图片有没有溢出、容器有没有隐藏裁剪区域。你看到的是“椭圆”或“边缘露图”，不是 class 失效，而是它本来就不干这些事。

• 检查 的 width 和 height 是否显式相等（比如都设为 64），别只写 width="64" 留 height 为 auto
• 若用响应式单位（如 rem 或百分比），确保父容器约束了宽高比，例如加 style="aspect-ratio: 1 / 1"
• 在 Flex/Grid 容器中，align-items: stretch 会撑高图片——给 加 align-self: center 或改用 object-fit: cover 配固定尺寸

必须同时设置 overflow: hidden 的位置在哪？

它得加在**承载图片的同一元素上**，不能分开写。很多人把 overflow: hidden 写在父

，然后只给 加 .rounded-circle，结果图片边缘照样露出来。

• 正确写法：
  
• 错误写法：
  
  —— overflow: hidden 在 上无效，浏览器不支持对替换元素直接裁剪
• Bootstrap 5 没提供 .overflow-hidden 与尺寸类组合的预设，得自己拼：比如 rounded-circle overflow-hidden w-12 h-12（需确认你项目里启用了 h-* 工具类）

object-fit: cover 和 background-image 方案怎么选？

核心区别在于语义、可访问性和控制粒度。 + object-fit 是标准做法，但某些老安卓 WebView 对它的 border-radius 裁剪支持不稳定；background-image 更稳，但牺牲了 alt 文本和 SEO。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 优先用 ：加 alt="张三的头像"，再配 class="rounded-circle w-12 h-12 object-fit-cover"，并确保容器有 overflow: hidden
• 降级兼容 iOS 9 或 Android 4.4：改用容器背景图方案，
  ，CSS 中定义 width/height 相等、border-radius: 50%、overflow: hidden、background-size: cover
• 别混用：不要给 同时设 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 的实际妥协。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！