在css中如何制作圆形头像效果_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

在css中如何制作圆形头像效果

2025-10-14

浏览次数：次

返回列表

实现圆形头像需设置正方形图片并应用border-radius: 50%，结合object-fit: cover保持比例，可添加边框阴影增强视觉效果，响应式设计中建议使用相对单位。

在css中如何制作圆形头像效果

要实现圆形头像效果，核心是使用 CSS 的 border-radius 属性将图片的边角完全圆化。只要设置合适的值，就能让方形图片变成完美的圆形。

1. 基本圆形头像样式

确保图片是正方形，并设置 border-radius: 50%，这是实现圆形的关键。

.round-*atar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover; /* 保持图片比例填充 */
  display: block;
}

HTML 中使用：

@@##@@

2. 添加边框或阴影提升视觉效果

可以为圆形头像添加边框、阴影，使其更突出。

察言观数AskTable

企业级AI数据表格智能体平台

78 查看详情察言观数AskTable

.round-*atar {
  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 背景图设置，也可以实现同样效果。

.*atar-bg {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: url('*atar.jpg');
  background-size: cover;
  background-position: center;
}