css制作圆形头像效果如何做_使用border-radius:50%实现圆形-css教程-PHP中文网

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

P粉602998670

发布： 2025-12-04 12:29:02

原创

374人浏览过

使用border-radius: 50%可将正方形图片变为圆形头像，需设置等宽高等尺寸，并用object-fit: cover保持比例，配合边框、阴影等样式增强效果，如：.avatar { 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%
可选：添加边框、阴影等装饰效果

示例代码：

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

登录后复制

HTML结构示例

配合 img 标签使用：

立即学习“前端免费学习笔记（深入）”；

蚂蚁PPT

AI在线智能生成PPT

113

查看详情

<img src="face.jpg" class="avatar" alt="用户头像">

登录后复制

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

增强效果（可选）

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

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

登录后复制

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

以上就是css制作圆形头像效果如何做_使用border-radius:50%实现圆形的详细内容，更多请关注php中文网其它相关文章！