使用border-radius:50%将正方形元素变为圆形头像，需保证宽高相等避免椭圆，配合object-fit:cover确保图片填充不变形；通过Tailwind的rounded-full、w-12、h-12等工具类可快速实现；自定义.avatar-sm、.avatar-md等类组合通用样式提升复用性；非图像元素可用div结合flex布局居中内容，统一视觉效果。
想要实现圆形头像效果，CSS 的 border-radius 属性是最核心的技巧。结合工具类的写法，可以快速在项目中复用样式，提升开发效率。下面介绍几种实用方法。
基础圆形头像：使用 border-radius: 50%
将一个正方形元素的边框圆角设为50%，就能变成圆形。
示例代码：
.circular-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover; /* 图片裁剪以填充容器 */
display: block;
}
HTML 使用：
立即学习“前端免费学习笔记（深入）”；
<img src="avatar.jpg" class="circular-avatar" alt="用户头像">
关键点：必须保证宽高相等，否则会变成椭圆。
使用现代 CSS 工具类框架（如 Tailwind）
像 Tailwind CSS 这样的工具类框架，内置了 rounded-full 类，直接实现圆形。
用法示例：
<img src="avatar.jpg" class="w-12 h-12 rounded-full object-cover">
-
w-12 h-12：设置固定尺寸（相当于 48px） -
rounded-full：对应border-radius: 9999px，等效于圆形 -
object-cover：确保图片填满且不变形
自定义工具类提升复用性
如果你不使用框架，也可以自己定义一组通用的圆形头像类。
.avatar-sm { width: 32px; height: 32px; }
.avatar-md { width: 48px; height: 48px; }
.avatar-lg { width: 64px; height: 64px; }
.avatar {
border-radius: 50%;
object-fit: cover;
display: block;
}
HTML 中组合使用：
<img src="user.jpg" class="avatar avatar-md">
这样就能通过组合类快速调整头像大小和样式。
处理非图片元素（如占位符图标）
如果是用 div 显示默认头像或图标，同样适用：
<div class="avatar avatar-md bg-gray-300 flex items-center justify-center">U</div>
配合 Flex 布局居中文字或图标，视觉上保持一致。
基本上就这些。掌握 border-radius: 50% 和尺寸控制，再结合工具类命名逻辑，就能高效实现各种圆形头像布局。不复杂但容易忽略细节，比如宽高一致性和图片裁剪方式。
