使用border-radius:50%可将正方形图片变为圆形头像，需设置等宽高、用object-fit或background-size优化显示效果，并注意图片比例与分辨率。
在CSS初级项目中实现圆形头像，最常用且简单的方法就是使用 border-radius: 50%。这个属性可以将一个方形或矩形的图片四角圆化，当值为50%时，会形成一个完美的圆形（前提是图片本身是正方形）。
基本原理：border-radius 50% 是如何工作的？
border-radius 属性用于设置元素边框的圆角程度。当设置为 50% 时，浏览器会根据元素的宽度和高度，将四个角的圆角半径设为宽高的一半。如果元素是正方形（宽高等于），就会变成一个标准的圆形。
注意： 如果图片不是正方形，比如宽大于高，border-radius: 50% 会产生椭圆效果，而不是正圆。
实现步骤
要成功实现圆形头像，可以按照以下步骤操作：
立即学习“前端免费学习笔记（深入）”；
- 准备一张正方形图片（如 100px × 100px），视觉效果最佳
- 使用
<img>标签或带背景图的 div 容器 - 设置固定宽高，推荐使用像素或 rem 单位
- 添加
border-radius: 50%让其变圆 - 可选：添加边框、阴影等美化效果
代码示例
以下是使用 <img> 标签实现圆形头像的完整代码：
<style>
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover; /* 确保图片内容不被拉伸 */
border: 3px solid #ddd;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>
<p><img src="your-image.jpg" alt="用户头像" class="avatar"></p>如果是用 div 背景图方式：
<style>
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
background-image: url('your-image.jpg');
background-size: cover;
background-position: center;
border: 3px solid #fff;
}
</style>
<p><div class="avatar"></div></p>常见问题与建议
实际开发中可能会遇到一些小问题，注意以下几点可以避免：
- 确保图片容器是正方形，否则无法形成正圆
- 使用
object-fit: cover防止<img>在缩放时变形 - 移动端注意图片分辨率，模糊头像会影响整体质感
- 可结合
overflow: hidden增强兼容性（虽然通常不需要）
基本上就这些。用 border-radius: 50% 实现圆形头像是CSS中最基础也最实用的技巧之一，掌握它对后续学习布局和UI设计很有帮助。
