圓角頭像的制作

日期：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做透明圓弧圖片存在效不美觀尚