2024年6月6日发(作者：)

下面我们就来看看如何使用CSS3的border-radius属性创建圆形的

Avatar头像图标。

一、目标

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

二、障碍

经过我的测试，IE对border-radius属性完全不支持，甚至包括IE9；

Firefox和Opera仅支持边框的圆角，不支持图片的圆角；Safari和

Chorme是对该属性支持最好的浏览器，即支持边框的圆角，也支持

图片的圆角效果。（如下图）

三、解决方法

按照webdesignerwall上面提供的方法我试了一下，可以解决Firefox

和Opera浏览器的问题，但是IE丝毫不受影响，仍然表现为方方正

正的图片，不过这样也好，起码解决了边框是圆的，而图片确是方的

这种不伦不类的问题。

具体方法为：将图片元素包围在一个

标签内，将原图片作为背

景图片添加给这个

标签，再将原来插入的图片的透明度

设置为0，或者设置为display:none;推荐降低透明度的方法，这样不

会影响图片的查看和下载。

1

2

3

【题外话：如果你喜欢这篇文章的话，可以直接订阅飞鱼的声纳的RSS源，在

打开的页面中点击鲜果订阅、抓虾订阅以及其它任何你正在使用的在线订阅工具，

如果你还没有在线阅读器的话，为了提高你的阅读效率，建议你还是注册一个的

好！】