圆角头像的制作

日期：2013-11-27  来源：攀枝花惠康网络公司

良多若干好多sns的头像都使用圆角了，昨天在校内上看到了圆角头像，今天在Qzone的也看到了圆角头像，圆角头像看上去比直角的美不美观。

<div id="circular-box" class="clearfix">

<ul>

<li><a href=http://www.css88.com/archives/"http://www.sodao.com"><img src="jy20090504026.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li>

<li><a href="http://www.sodao.com"><img src="jy20090504035.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li>

<li><a href="http://www.sodao.com"><img s"cir-bg"></span></a></li>

</ul>

</div>

圆角头像的建造事理就是在头像上笼盖一张透明的图片，把四个角颜色设置成页面的布景颜色，中心透明，

假设我的页面底色是纯黑色的，那么这个透明图片可以做成这样，如图：

这里需要注重的是需要把图片保留成24位的png，虽然IE6撑持8位的png的透明，可是8位的png做透明圆弧图片存在效不美观尚