读书频道 > web开发 > 其他综合 > 图解CSS3:核心技术与案例实战
6.表格应用圆角
2014-09-15 15:29:17     我来说两句 
收藏    我要投稿   
《图解css3:核心技术与案例实战》理论知识系统全面,详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应web设计、web字体等主题下涵盖的所有css3新特  立即去当当网订购

另外表格元素table使用border-radius是不一样的,当表格样式属性border-collapse是collapse时,表格不能正常显示,只有border-collapse属性值为separate时,表格圆角才能正常显示。例如:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>表格的圆角应用</title>
  <style type="text/css">
    table {
      margin: 10px;
      border:5px solid orange;
      border-radius: 10px;
    }
    .table1 {
      border-collapse: collapse;
    }
    .table2 {
      border-collapse: separate;
    }
  </style>
</head>
<body>
  <table class="table1">
    <tr>
      <td>border-collapse:collapse</td>
    </tr>
  </table>
  <table class="table2">
    <tr>
      <td>border-collapse:separate</td>
    </tr>
  </table>
</body>
</html>

效果如图3-33所示。

 

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:5.图片应用圆角
下一篇:3.4.3 浏览器兼容性
相关文章
图文推荐
3.2 Windows 7设置
3.1 DNS解析
2.3 HTTP协议
2.2 TCP/IP协议与So
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站