纯CSS圆角边框

1. <style type="text/css">
   
2. 
   
3. #xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
   
4. #xsnazzy h1 {font-size:2.5em; color:#fff;}
   
5. #xsnazzy h2 {font-size:2em;color:#06a; border:0;}
   
6. #xsnazzy p {padding-bottom:0.5em;}
   
7. #xsnazzy h2 {padding-top:0.5em;}
   
8. #xsnazzy {background: transparent; margin:1em;width:500px;}
   
9. 
   
10. .xtop, .xbottom {display:block; background:transparent; font-size:1px;}
    
11. .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
    
12. .xb1, .xb2, .xb3 {height:1px;}
    
13. .xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;}
    
14. .xb1 {margin:0 5px; background:#08c;}
    
15. .xb2 {margin:0 3px; border-width:0 2px;}
    
16. .xb3 {margin:0 2px;}
    
17. .xb4 {height:2px; margin:0 1px;}
    
18. .xboxcontent {display:block; background:#ccc; border:0 solid #08c; border-width:0 1px;width:497px;}
    
19. </style>
    
20. 
    
21. <div id="xsnazzy">
    
22. <b class="xtop">
    
23. <b class="xb1"></b>
    
24. <b class="xb2"></b>
    
25. <b class="xb3"></b>
    
26. <b class="xb4"></b></b>
    
27. <div class="xboxcontent">
    
28. <h1>Snazzy Borders</h1>
    
29. 
    
30. 
    
31. </div>
    
32. <b class="xbottom">
    
33. <b class="xb4"></b>
    
34. <b class="xb3"></b>
    
35. <b class="xb2"></b>
    
36. <b class="xb1"></b>
    
37. </b>
    
38. </div>

复制代码

支持ing。。。

还有更简单的呢，请稳步http://www.nn168.net/forum.php?mod=viewthread&tid=1038&extra=page%3D1

好东西，要了。

稍微注重以下细节那就更不错了