网页设计的时候，有没有想过如何制作那些花哨的圆形头像或图像，而不需要使用Photoshop？如果你不知道我在说什么，那么现在咱们就一起实现，仅仅使用CSS。
工具/原料
CSS
HTML
浏览器
基本代码
1、让我们先从基本的HTML开始。在div标签中设置class属性，用于定义这个DIV的样式。
2、CSS样式。让我们为类avatar-mi罕铞泱殳ckey写一个基本样式。background-size是CSS3鹚兢尖睁的属性，它允许操作背景图像的尺寸。您可以通过输入确切的像素值（100px100px），百分比（100%100%），把背景图像扩展至足够大以使背景图像完全覆盖区域（cover），把图像图像扩展至最大尺寸以使其宽度和高度完全适应内容区域（contain）来设置其宽度和高度。
制作圆形头像
1、现螅岔出礤在我们有了适合方形容器的图像。让我们改变CSS代码来做圆形图像。我们将使用border-radius（边框半径）属性，获取圆的关键是将border-radius属性设置为高曜汹浒吟度和宽度的一半，并且高度值和宽度值必须相同；或者您可以将其设置为50％。我们的CSS文件现在看起来像这样：
进一步扩展
1、我们给头像加边框（border）和阴影效果（属性：box-shadow）。border-radius加前缀-webkit（-webkit-border-radius）或-moz（-moz-border-radius），是为了适合不同浏览器的。
