css制作头像

使用CSS制作头像

圆形头像

通过border-radius属性将方形图像变为圆形。确保容器宽高相等且图像填满容器。

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

添加边框效果

为头像增加边框和阴影提升视觉效果。通过box-shadow实现柔和阴影，border添加实线边框。

.avatar {
  border: 3px solid #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

响应式头像

使用百分比或vw/vh单位实现头像尺寸自适应。配合max-width防止过大显示。

.avatar {
  width: 10vw;
  height: 10vw;
  max-width: 150px;
}

悬停动画效果

通过CSS过渡或变换添加交互效果。例如悬停时放大或旋转。

.avatar {
  transition: transform 0.3s ease;
}
.avatar:hover {
  transform: scale(1.1);
}

文字头像替代方案

当无图像时可用CSS生成带背景色的文字头像。通过伪元素或background-color结合text-align实现。

.text-avatar {
  width: 80px;
  height: 80px;
  background-color: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

头像组布局

多个头像水平排列时，使用负边距或flexbox控制重叠间距。

.avatar-group {
  display: flex;
}
.avatar-group .avatar {
  margin-right: -10px;
}