您的位置：首页 > 其它

圆角头像的制作

2009-08-21 09:34 260 查看 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片的圆角</title>
<mce:style type="text/css"><!--
/*reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0;margin:0;}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,th,var{font-weight:normal;font-style:normal}
strong, b{ font-weight: bold; }
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-weight:7100;}
h1{font-size:18px}
h2{font-size:16px}
h3{font-size:14px}
h4{font-size:14px}
h5{font-size:12px}
h6{font-size:12px}
q:before,q:after{content:''}
abbr,acronym{border:0}
hr {margin: 0;padding: 0;border: 0;color: #CDCDCD;background-color: #CDCDCD;height: 1px}
blockquote{color:#666;font-style:italic;}
sup,sub{line-height:0}
abbr,acronym{border-bottom:1px dotted #666}
pre{white-space:pre;}
pre,code,tt{font:12px 'andale mono', 'lucida console', monospace;line-height:1.5}
/*clear clearfix*/
body{ background-color:#000}
.clearfix:after {content: "/0020"; display: block; height: 0;clear: both; visibility: hidden; }
.clearfix {zoom: 1;}
/*==========================*/
#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(http://www.css88.com/demo/circular-img/circular.png) no-repeat; _background:none;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.css88.com/demo/circular-img/circular.png',sizingMethod='crop'); cursor:pointer}
--></mce:style><style type="text/css" mce_bogus="1">/*reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0;margin:0;}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,th,var{font-weight:normal;font-style:normal}
strong, b{ font-weight: bold; }
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-weight:7100;}
h1{font-size:18px}
h2{font-size:16px}
h3{font-size:14px}
h4{font-size:14px}
h5{font-size:12px}
h6{font-size:12px}
q:before,q:after{content:''}
abbr,acronym{border:0}
hr {margin: 0;padding: 0;border: 0;color: #CDCDCD;background-color: #CDCDCD;height: 1px}
blockquote{color:#666;font-style:italic;}
sup,sub{line-height:0}
abbr,acronym{border-bottom:1px dotted #666}
pre{white-space:pre;}
pre,code,tt{font:12px 'andale mono', 'lucida console', monospace;line-height:1.5}
/*clear clearfix*/
body{ background-color:#000}
.clearfix:after {content: "/0020"; display: block; height: 0;clear: both; visibility: hidden; }
.clearfix {zoom: 1;}
/*==========================*/
#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(http://www.css88.com/demo/circular-img/circular.png) no-repeat; _background:none;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.css88.com/demo/circular-img/circular.png',sizingMethod='crop'); cursor:pointer}</style>
</head>
<body>
<div id="circular-box" class="clearfix">
<ul>
<li><a href="http://www.sodao.com" mce_href="http://www.sodao.com"><img src="http://www.css88.com/demo/circular-img/jy20090504026.jpg" mce_src="http://www.css88.com/demo/circular-img/jy20090504026.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li>
<li><a href="http://www.sodao.com" mce_href="http://www.sodao.com"><img src="http://www.css88.com/demo/circular-img/jy20090504035.jpg" mce_src="http://www.css88.com/demo/circular-img/jy20090504035.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li>
<li><a href="http://www.sodao.com" mce_href="http://www.sodao.com"><img src="http://www.css88.com/demo/circular-img/jy20090504036.jpg" mce_src="http://www.css88.com/demo/circular-img/jy20090504036.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li>
</ul>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航