纯CSS无图打造圆角Table 无图制作圆角

 

代码

< html >
< head >
  < style  type ="text/css" >
 div.RoundedCorner... { background :  #9BD1FA }
 b.rtop, b.rbottom... { display : block ; background :  #FFF }
 b.rtop b, b.rbottom b... { display : block ; height :  1px ; overflow :
 hidden ;  background :  #9BD1FA }
 b.r1... { margin :  0 5px }
 b.r2... { margin :  0 3px }
 b.r3... { margin :  0 2px }
 b.rtop b.r4, b.rbottom b.r4... { margin :  0 1px ; height :  2px }
  </ style >
</ head >
< body >
  < div  class ="RoundedCorner" >
   < b  class ="rtop" >< b  class ="r1" ></ b >< b  class ="r2" ></ b >
   < b  class ="r3" ></ b >< b  class ="r4" ></ b ></ b >
     < table  style ="width:500px;height:100px;" >
         < tr >
            < td > 单元格1 </ td >
            < td > 单元格2 </ td >
         </ tr >
         < tr >
            < td > 单元格3 </ td >
            < td > 单元格4 </ td >
         </ tr >
     </ table >
   < b  class ="rbottom" >< b  class ="r4" ></ b >< b  class ="r3" ></ b >
   < b  class ="r2" ></ b >< b  class ="r1" ></ b ></ b >
  </ div >
</ body >
</ html >

效果如下：