纯CSS定义的圆角边框

用这种纯CSS定义的圆角边框 好象不错  ，连小图片都省了

css 代码

 

1. .xtop, .xbottom {display:block; background:transparent; font-size:1px;}  
2. .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}  
3. .xb1, .xb2, .xb3 {height:1px;}  
4. .xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;}  
5. .xb1 {margin:0 5px; background:#08c;}  
6. .xb2 {margin:0 3px; border-width:0 2px;}  
7. .xb3 {margin:0 2px;}  
8. .xb4 {height:2px; margin:0 1px;}  
9.   
10. .xboxcontent {display:block; background:#ccc; border:0 solid #08c; border-width:0 1px;}  

xml 代码

 

1. <div id="xsnazzy">  
2.     <b class="xtop">  
3.           <b class="xb1"></b>  
4.           <b class="xb2"></b>  
5.           <b class="xb3"></b>  
6.           <b class="xb4"></b>  
7.     </b>  
8.     <div class="xboxcontent">  
9.   
10.     </div>  
11.     <b class="xbottom">  
12.            <b class="xb4"></b>  
13.            <b class="xb3"></b>  
14.            <b class="xb2"></b>  
15.            <b class="xb1"></b>  
16.     </b>  
17. </div>