使用 css 的 border-radius: 50% 属性可轻松将方形图片裁剪为标准圆形头像。
1、创建一个 HTML 文件,在页面中添加一个 <div> 容器,并在其中嵌入 <img> 标签用于加载头像图像,最终呈现效果参见下图:

2、利用 CSS 将该 <div> 设置为正圆形状,同时设定 <img> 的宽高为 100%,确保图片完整覆盖整个圆形区域,不出现留白或拉伸失真。

立即学习“前端免费学习笔记(深入)”;
3、保存文件后在浏览器中运行,即可看到清晰、居中、边缘平滑的圆形头像显示效果,如下图所示:











