DIV CSS 佈局教程網

網頁制作poluoluo文章簡介：目前許多網站的個人頭像都采用圓角矩形來體現，這種效果就是通過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="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 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}

這裡需要注意的是：

1. 使用 AlphaImageLoader 篩選器的元素必須有寬高，width:XXpx; height:XXpx;
2. ie6下必須充值背景為none，_background:none

查看demo：http://www.css88.com/demo/circular-img/circular-img1.html

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

第二種：使用widgetfx的方法：

你可以在這裡獲取最新的widgetfx:http://code.google.com/p/widgetfx/source/browse/widgetfx.org/?r=122

html代碼：

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

<ul>

<li><a href="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 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; behavior:url("iepngfix.htc"); cursor:pointer}

這裡需要注意的是：

1. 頁面頭部需要引用iepngfix_tilebg.js；
2. 在透明圖片的元素上加：behavior:url(”iepngfix.htc”)；

查看demo：http://www.css88.com/demo/circular-img/circular-img.html

另：校內最新的該效果制作有的特別，在支持html5的浏覽器上使用了Canvas,IE下是用VML,HTML 5畫圖基本上都靠canvas,而且需要js的支持。相關信息可以查看http://byzuo.com/blog/html5-canvas