17370845950

使用border-radius: 50%可将正方形图片变为圆形头像，需设置等宽高等尺寸，并用object-fit: cover保持比例，配合边框、阴影等样式增强效果，如：.avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }，适用于img标签，非正方形图可能变形，建议使用正方形原图。

想用CSS把图片变成圆形头像，最简单有效的方法就是使用 border-radius: 50%。这个属性可以把一个方形的图片四角圆化，当值为50%时，刚好形成一个完美的圆形。

基本实现方法

要让一张图片显示为圆形，需要确保图片本身是正方形的，然后应用圆角样式：

示例代码：

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover; /* 确保图片内容不被拉伸 */
}

HTML结构示例

配合 img 标签使用：

@@##@@

这样就能在页面上显示一个圆形头像。如果图片不是正方形，可能会看起来被“压缩”或裁切不对，所以建议原始图片尽量为正方形。

增强效果（可选）

你可以进一步美化圆形头像，比如加边框、阴影或悬停效果：

.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;
}
.avatar:hover {
transform: scale(1.1);
}

基本上就这些。只要记住：正方形 + border-radius: 50% = 圆形头像，简单又实用。