不使用css3属性实现圆角头像效果的方法介绍

了解过css3的同学对css的border-radius这个属性应该都知道，在css3下实现圆形是很简单的。

border-radius: 50%;

上面代码如果是一个张正方形的图片就会是一个正圆，如果是一张长方形就会椭圆。

今天我就来介绍一种利用背景图片实现圆角头像效果，这种方法有一个好处是低版本的浏览器也可以兼容，因为css3的在很多低版本的浏览器是不支持的。

先来看最终效果。

其实上面是用两张图片，一张是头像图片，圆角是用的背景图片。

头像真正图片如下：

背景图片

这张圆的中间区域是透明的。这样就可以把中间的图案显示出来，面外面是不透明达到一个遮罩的效果，这也是本例最巧妙的地方 。

两张图片重叠

下面来看一下页面元素布局：

可以看到在img上面写了一个空的div类为portrait-over，这个类的样式为：

把圆的背景所在div设置为绝对定位，这样就不会占用文档流的空间，也让两张图片完美的叠在了一起。