CSS教程:制作圆角矩形的网站头像

【 tulaoshi.com - Web开发 】

目前许多网站的个人头像都采用圆角矩形来体现，这种效果就是通过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"ullia href="http://www.sodao.com"img src="jy20090504026.jpg" width="200" height="200" /span class="cir-bg"/span/a/lilia href="http://www.sodao.com"img src="jy20090504035.jpg" width="200" height="200" /span class="cir-bg"/span/a/lilia 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}

这里需要注意的是：

查看demo：

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

第二种：使用widgetfx的方法：

你可以在这里获取最新的widgetfx:

html代码：

div id="circular-box" class="clearfix"ullia href="http://www.sodao.com"img src="jy20090504026.jpg" width="200" height="200" /span class="cir-bg"/span/a/lilia href="http://www.sodao.com"img src="jy20090504035.jpg" width="200" height="200" /span class="cir-bg"/span/a/lilia 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}

这里需要注意的是：

查看demo：

另：校内最新的该效果制作有的特别，在支持html5的浏览器上使用了Canvas,IE下是用VML,HTML 5画图基本上都靠canvas,而且需要js的支持。相关信息可以查看