纯CSS实现的圆角边框实例

　　不多说,直接看以下代码,保存为HTML文件运行可以查看效果
　　
　　<html>
　　
　　<title>css实例教程:纯CSS实现的圆角边框实例-www.web2bar.cn网站制作教程网</title>
　　
　　<styletype="text/css">
　　
　　#xsnazzyh1,#xsnazzyh2,#xsnazzyp{margin:010px;letter-spacing:1px;}
　　
　　#xsnazzyh1{font-size:2.5em;color:#000;}
　　
　　#xsnazzyh2{font-size:2em;color:#06a;border:0;}
　　
　　#xsnazzyp{padding-bottom:0.5em;}
　　
　　#xsnazzyh2{padding-top:0.5em;}
　　
　　#xsnazzy{background:transparent;margin:1em;}
　　
　　.xtop,.xbottom{display:block;background:transparent;font-size:1px;}
　　
　　.xb1,.xb2,.xb3,.xb4{display:block;overflow:hidden;}
　　
　　.xb1,.xb2,.xb3{height:1px;}
　　
　　.xb2,.xb3,.xb4{background:#fff;border-left:1pxsolid#ccc;border-right:1pxsolid#ccc;}
　　
　　.xb1{margin:05px;background:#ccc;}
　　
　　.xb2{margin:03px;border-width:02px;}
　　
　　.xb3{margin:02px;}
　　
　　.xb4{height:2px;margin:01px;}
　　
　　.xboxcontent{display:block;background:#fff;border:0solid#ccc;border-width:01px;}
　　
　　</style>
　　
　　<divid="xsnazzy">
　　
　　<bclass="xtop"><bclass="xb1"></b><bclass="xb2"></b><bclass="xb3"></b><bclass="xb4"></b></b>
　　
　　<divclass="xboxcontent">
　　
　　<h1>CSS圆角。！</h1>
　　
　　<p>
　　
　　CSS圆角。
　　
　　</p>
　　
　　</div>
　　
　　<bclass="xbottom"><bclass="xb4"></b><bclass="xb3"></b><bclass="xb2"></b><bclass="xb1"></b></b>
　　
　　</div></html>

分享到：