css制作圆形头像效果如何做_使用border-radius:50%实现圆形

新闻中心 NEWS CENTER

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

css制作圆形头像效果如何做_使用border-radius:50%实现圆形

2025-12-04

浏览次数：次

返回列表

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

css制作圆形头像效果如何做_使用border-radius:50%实现圆形

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

基本实现方法

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

设置图片的宽度和高度相等（如 100px × 100px）
添加 CSS 属性：border-radius: 50%
可选：添加边框、阴影等装饰效果

示例代码：

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

HTML结构示例

配合 img 标签使用：

Tunee AI

新一代AI音乐智能体

1104 查看详情 Tunee AI

@@##@@

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

增强效果（可选）

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

.*atar {
  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;
}
<p>.*atar:hover {
transform: scale(1.1);
}</p>

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