zoukankan      html  css  js  c++  java
  • 纯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>
    效果如下:
  • 相关阅读:
    不用if/else swich for while实现累加
    1.java数据结构
    青蛙跳台阶问题
    next与nextLine
    9.遗传算法
    Docker镜像管理
    Docker镜像管理
    CentOS 6.7安装Docker
    CentOS 6.7安装Docker
    数字三角形_递归_递推(动态规划)
  • 原文地址:https://www.cnblogs.com/mikechang/p/1621594.html
Copyright © 2011-2022 走看看