纯html和css实现圆角表格(教学) spiffy corner table

纯html和css实现圆角表格(教学) spiffy corner table

Website / 网业
http://www.spiffycorners.com/

Example / 范例
http://www.spiffycorners.com/ind ... g=b20000&sz=5px

CSS Code / 代码

1. <style type="text/css">
   
2. .spiffy{display:block}
   
3. .spiffy *{
   
4.   display:block;
   
5.   height:1px;
   
6.   overflow:hidden;
   
7.   font-size:.01em;
   
8.   background:#b20000}
   
9. .spiffy1{
   
10.   margin-left:3px;
    
11.   margin-right:3px;
    
12.   padding-left:1px;
    
13.   padding-right:1px;
    
14.   border-left:1px solid #dd9191;
    
15.   border-right:1px solid #dd9191;
    
16.   background:#c53f3f}
    
17. .spiffy2{
    
18.   margin-left:1px;
    
19.   margin-right:1px;
    
20.   padding-right:1px;
    
21.   padding-left:1px;
    
22.   border-left:1px solid #f7e5e5;
    
23.   border-right:1px solid #f7e5e5;
    
24.   background:#c03030}
    
25. .spiffy3{
    
26.   margin-left:1px;
    
27.   margin-right:1px;
    
28.   border-left:1px solid #c03030;
    
29.   border-right:1px solid #c03030;}
    
30. .spiffy4{
    
31.   border-left:1px solid #dd9191;
    
32.   border-right:1px solid #dd9191}
    
33. .spiffy5{
    
34.   border-left:1px solid #c53f3f;
    
35.   border-right:1px solid #c53f3f}
    
36. .spiffyfg{
    
37.   background:#b20000}
    
38. </style>

复制代码

HTML Code / 代码

1. <div>
   
2.   <b class="spiffy">
   
3.   <b class="spiffy1"><b></b></b>
   
4.   <b class="spiffy2"><b></b></b>
   
5.   <b class="spiffy3"></b>
   
6.   <b class="spiffy4"></b>
   
7.   <b class="spiffy5"></b></b>
   
8. 
   
9.   <div class="spiffyfg">
   
10.     <!-- content goes here 内容贴这里 -->
    
11.   </div>
    
12. 
    
13.   <b class="spiffy">
    
14.   <b class="spiffy5"></b>
    
15.   <b class="spiffy4"></b>
    
16.   <b class="spiffy3"></b>
    
17.   <b class="spiffy2"><b></b></b>
    
18.   <b class="spiffy1"><b></b></b></b>
    
19. </div>

复制代码