使用border-radius: 50%可将正方形图片变为圆形头像，需设置等宽高等尺寸，并用object-fit: cover保持比例，配合边框、阴影等样式增强效果，如：.avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }，适用于img标签，非正方形图可能变形，建议使用正方形原图。
想用CSS把图片变成圆形头像，最简单有效的方法就是使用 border-radius: 50%。这个属性可以把一个方形的图片四角圆化，当值为50%时，刚好形成一个完美的圆形。
基本实现方法
要让一张图片显示为圆形，需要确保图片本身是正方形的，然后应用圆角样式：
- 设置图片的宽度和高度相等（如 100px × 100px）
- 添加 CSS 属性：border-radius: 50%
- 可选：添加边框、阴影等装饰效果
示例代码：
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover; /* 确保图片内容不被拉伸 */
}
HTML结构示例
配合 img 标签使用：
立即学习“前端免费学习笔记（深入）”；
<img src="face.jpg" class="avatar" alt="用户头像">
这样就能在页面上显示一个圆形头像。如果图片不是正方形，可能会看起来被“压缩”或裁切不对，所以建议原始图片尽量为正方形。
增强效果（可选）
你可以进一步美化圆形头像，比如加边框、阴影或悬停效果：
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
transition: transform 0.3s;
}
<p>.avatar:hover {
transform: scale(1.1);
}</p>基本上就这些。只要记住：正方形 + border-radius: 50% = 圆形头像，简单又实用。
