在飞鱼的声纳的评论列表部分，你可以看到添加了圆角背景以后的Avatar头像效果。实现这种效果的方法是提前做好一个圆角矩形图片，然后使用CSS当中的background-image属性将做好的图片设置为背景图片。那如果我要做成下图这样的圆形的效果，该如何实现呢？

在CSS3出现以前，这个问题的答案是否定的。原因是你尽可以给头像图标添加圆形的背景，但是你却无法改变调用的头像图标本身的形状，它永远都是方方正正的，你只能改变它的大小。幸运的是，我们现在有了CSS3这个比CSS2功能更为强大的工具。虽然目前并非所有的浏览器都支持CSS3的所有属性，但是利用CSS3属性配合一些简单的hack，我们可以给图片元素应用圆角的效果，将方方正正的图片变成圆形的，最终实现我们所期望的结果。

这里我们要用到CSS3中的边框半径属性（border-radius），关于CSS3的一些常用属性，《基础CSS3》这篇文章讲的很清楚。如果你想了解CSS3更多，请认真阅读这篇文章。

下面我们就来看看如何使用CSS3的border-radius属性创建圆形的Avatar头像图标。

一、目标

使用CSS3的border-radius属性作出上图的圆形头像图标效果。

二、障碍

经过我的测试，IE对border-radius属性完全不支持，甚至包括IE9；Firefox和Opera仅支持边框的圆角，不支持图片的圆角；Safari和Chorme是对该属性支持最好的浏览器，即支持边框的圆角，也支持图片的圆角效果。（如下图）

三、解决方法

按照webdesignerwall上面提供的方法我试了一下，可以解决Firefox和Opera浏览器的问题，但是IE丝毫不受影响，仍然表现为方方正正的图片，不过这样也好，起码解决了边框是圆的，而图片确是方的这种不伦不类的问题。

具体方法为：将图片元素包围在一个<div>标签内，将原图片作为背景图片添加给这个<div>标签，再将原来插入的<img>图片的透明度设置为0，或者设置为display:none;推荐降低透明度的方法，这样不会影响图片的查看和下载。

   <div class="img" style="background:url(avatar.jpeg) no-repeat;">
   <img src="avatar.jpeg" style="opacity:0"/>
   </div>