• 纯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">
      
    <class="rtop"><class="r1"></b><class="r2"></b>
      
    <class="r3"></b><class="r4"></b></b>
        
    <table style="500px;height:100px;">
            
    <tr>
               
    <td>单元格1</td>
               
    <td>单元格2</td>
            
    </tr>
            
    <tr>
               
    <td>单元格3</td>
               
    <td>单元格4</td>
            
    </tr>
        
    </table>
      
    <class="rbottom"><class="r4"></b><class="r3"></b>
      
    <class="r2"></b><class="r1"></b></b>
     
    </div>
    </body>
    </html>
    效果如下:
  • 相关阅读:
    SGU 275. To xor or not to xor
    4364: [IOI2014]wall砖墙
    3211: 花神游历各国
    5248: [2018多省省队联测]一双木棋
    3106: [cqoi2013]棋盘游戏
    POJ 1568 Find the Winning Move
    P3527 [POI2011]MET-Meteors
    P2617 Dynamic Rankings
    3262: 陌上花开
    1176: [Balkan2007]Mokia
  • 原文地址:https://www.cnblogs.com/mikechang/p/1621594.html
Copyright © 2020-2023  润新知