答案：通过CSS的border-radius:50%可使图片呈圆形。需设置等宽高容器，结合object-fit或背景图控制显示，还可添加边框阴影及适配响应式布局。
让HTML中的图片以圆形展示，主要依靠CSS的 border-radius 属性。只要将该属性设置为50%，就能把方形或矩形图片变成圆形（前提是图片宽高相等，否则会呈现椭圆形）。
1. 基础圆形图片样式
给图片添加CSS样式，使用 border-radius: 50% 实现圆形效果：HTML代码：
<img src="avatar.jpg" class="circle-image">
CSS代码：
.circle-image {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover; /* 保持图片比例填充容器 */
}
说明：设置相同的宽度和高度，并用 border-radius: 50% 将边角完全圆化。
立即学习“前端免费学习笔记（深入）”；
2. 使用背景图实现圆形（更灵活）
如果使用CSS背景图方式，可以更好地控制裁剪和居中：HTML代码：
<div class="circle-avatar"></div>
CSS代码：
.circle-avatar {
width: 200px;
height: 200px;
background-image: url('avatar.jpg');
background-size: cover;
background-position: center;
border-radius: 50%;
}
优点：适合头像、图标等固定尺寸场景，能精准控制图片显示区域。
3. 添加边框或阴影增强视觉效果
可为圆形图片添加边框或阴影，提升美观度：
.circle-image {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
注意：边框会增加元素总尺寸，布局时需预留空间。
4. 响应式圆形图片
在响应式设计中，可使用百分比或视口单位：
.circle-image {
width: 30%;
height: 0;
padding-bottom: 30%; /* 维持宽高比 */
border-radius: 50%;
background-image: url('avatar.jpg');
background-size: cover;
background-position: center;
overflow: hidden;
}
这种方法利用padding-bottom维持正方形比例，适合移动端适配。
基本上就这些方法，最常用的是第一种，简单直接。关键是保证图片容器为正方形并设置 border-radius: 50%。
