实现圆形头像需设置正方形图片并应用border-radius: 50%，结合object-fit: cover保持比例，可添加边框阴影增强视觉效果，响应式设计中建议使用相对单位。
要实现圆形头像效果，核心是使用 CSS 的 border-radius 属性将图片的边角完全圆化。只要设置合适的值，就能让方形图片变成完美的圆形。
1. 基本圆形头像样式
确保图片是正方形，并设置 border-radius: 50%，这是实现圆形的关键。
.round-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover; /* 保持图片比例填充 */
display: block;
}
HTML 中使用：
@@##@@
2. 添加边框或阴影提升视觉效果
可以为圆形头像添加边框、阴影，使其更突出。
立即学习“前端免费学习笔记（深入）”；
.round-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
3. 使用背景图方式（适用于伪元素或容器）
如果头像是通过 CSS 背景图设置，也可以实现同样效果。
.avatar-bg {
width: 100px;
height: 100px;
border-radius: 50%;
background-image: url('avatar.jpg');
background-size: cover;
background-position: center;
}
4. 注意事项
为了保证显示效果良好，注意以下几点：
- 原始图片尽量是正方形，避免拉伸变形
- 使用 object-fit: cover 可裁剪图片并保持清晰度
- 在响应式布局中，可使用 rem 或 % 单位，配合媒体查询调整大小
基本上就这些。只要掌握 border-radius: 50% 和合适的尺寸控制，就能轻松做出美观的圆形头像。
