武林網(www.49028c.com)文章簡介：目前許多網站的個人頭像都采用圓角矩形來體現，這種效果就是通過CSS與PNG透明圖標來做的，下面為您介紹兩種制作圓角矩形頭像的方法.

目前許多網站的個人頭像都采用圓角矩形來體現，這種效果就是通過CSS與PNG透明圖標來做的，下面為您介紹兩種制作圓角矩形頭像的方法：

好多sns的頭像都使用圓角了，昨天在校內上看到了圓角頭像，今天在Qzone的也看到了圓角頭像，圓角頭像看上去比直角的美觀。

圓角頭像的制作原理就是在頭像上覆蓋一張透明的圖片，把四個角顏色設置成頁面的背景顏色，中間透明，

假設我的頁面底色是純黑色的，那么這個透明圖片可以做成這樣，如圖：

這里需要注意的是需要把圖片保存成24位的png，雖然IE6支持8位的png的透明，但是8位的png做透明圓弧圖片存在效果上的問題，就是存在白色的雜邊或鋸齒，如圖：

，24位的png或32位的png的圓弧透明（半透明）圖片則非常光滑，但是該死的IE6不支持24位的png或32位的png透明(其他瀏覽器都支持)，需要我們額外的一下處理；

IE6下處理24位的png或32位的png方方法有很多，我做了2種：

第一種：使用 AlphaImageLoader 篩選器：

html代碼：

<div id="circular-box" class="clearfix"><ul><li><a href=""><img src="jy20090504026.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li><li><a href=""><img src="jy20090504035.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li><li><a href=""><img src="jy20090504036.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li></ul></div>

CSS代碼：

#circular-box{ margin: 50px;}#circular-box li{ float:left; margin:0 20px; position:relative}#circular-box li img{display:block}#circular-box li span{position:absolute; top:0; left:0;width:200px; height:200px; background:url(circular.png) no-repeat; _background:none;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='circular.png',sizingMethod='crop'); cursor:pointer}

這里需要注意的是：

查看demo：

------------------------------------------------------------------------------------------------------------------------------------------

第二種：使用widgetfx的方法：

你可以在這里獲取最新的widgetfx:?r=122

html代碼：

<div id="circular-box" class="clearfix"><ul><li><a href=""><img src="jy20090504026.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li><li><a href=""><img src="jy20090504035.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li><li><a href=""><img src="jy20090504036.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li></ul></div>