纯CSS圆角效果

 1 <html> 
 2 <head> 
 3 <title>纯CSS圆角效果</title> 
 4 <meta http-equiv="content-type" content="text/html; charset=gb2312"> 
 5 <style type="text/css"> 
 6 div.RoundedCorner{background: #9BD1FA} 
 7 b.rtop, b.rbottom{display:block;background: #FFF} 
 8 b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA} 
 9 b.r1{margin: 0 5px} 
10 b.r2{margin: 0 3px} 
11 b.r3{margin: 0 2px} 
12 b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px} 
13 </style> 
14 </head> 
15 <body> 
16 <div class="RoundedCorner"> 
17 <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> 
18 <p>纯CSS圆角效果</p> 
19 <p>纯CSS圆角效果</p> 
20 <p>纯CSS圆角效果</p> 
21 <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> 
22 </div> 
23 </body> 
24 </html>
posted on 2010-04-09 09:26 Dufe王彬阅读(210) 评论(0) 编辑收藏举报