将图片四角变为圆角的CSS代码
代码简介：
最近见到Facebook网站的图片圆角很特别，将一张方角的图片经过CSS定义后自动变成了圆角，后来研究了一番，发觉是用CSS控制一个圆角背景图片叠加而成，值得学习，不过因为是Facebook的资源图片，你在变动图片大小的时候最好将背景图片也变大。 注意，本效果在IE7以下版本浏览器有问题。
代码内容：
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
<title>将图片四角变为圆角的CSS代码 - www.webdm.cn</title>
<style type="text/css">
body{margin:30px;padding:0;font-size:12px;text-align:center}
div{float:left;line-height:25px;color:red}
.photo{position:relative;width:50px;height:50px;float:left;margin:0 50px;}
.photo span{width:50px;height:50px;display:block;position:absolute;top:0;left:0;background: url(http://www.webdm.cn/images/20091005/head_bg.png) no-repeat;}
.photo img{border:none;padding:0;}
</style>
<!--[if lt IE 7]>
<style type="text/css">
.photo span { behavior: url(iepngfix.htc);}
</style>
<![endif]-->
</head>
<body>
<div class="photo">
<a href="#"><span></span><img src="http://www.webdm.cn/images/wall3_s.jpg" alt="image" width="50" height="50" /></a>圆角头像
</div>
<div><img src="http://www.webdm.cn/images/wall3_s.jpg" alt="image" /><br />实际头像</div>
</body>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
代码来自：http://www.webdm.cn/webcode/1201899c-5c6a-49e0-b17f-0626f3d17c15.html
<head>
<title>将图片四角变为圆角的CSS代码 - www.webdm.cn</title>
<style type="text/css">
body{margin:30px;padding:0;font-size:12px;text-align:center}
div{float:left;line-height:25px;color:red}
.photo{position:relative;width:50px;height:50px;float:left;margin:0 50px;}
.photo span{width:50px;height:50px;display:block;position:absolute;top:0;left:0;background: url(http://www.webdm.cn/images/20091005/head_bg.png) no-repeat;}
.photo img{border:none;padding:0;}
</style>
<!--[if lt IE 7]>
<style type="text/css">
.photo span { behavior: url(iepngfix.htc);}
</style>
<![endif]-->
</head>
<body>
<div class="photo">
<a href="#"><span></span><img src="http://www.webdm.cn/images/wall3_s.jpg" alt="image" width="50" height="50" /></a>圆角头像
</div>
<div><img src="http://www.webdm.cn/images/wall3_s.jpg" alt="image" /><br />实际头像</div>
</body>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
代码来自：http://www.webdm.cn/webcode/1201899c-5c6a-49e0-b17f-0626f3d17c15.html
