大马资讯论坛 - 马来西亚中文资讯平台

标题: 纯html和css实现圆角表格(教学) spiffy corner table [打印本页]
作者: 资讯王    时间: 2010-3-17 11:22
标题: 纯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>

  9.   <div class="spiffyfg">
  10.     <!-- content goes here 内容贴这里 -->
  11.   </div>

  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>
复制代码




欢迎光临 大马资讯论坛 - 马来西亚中文资讯平台 (http://freeinfo.com.my/) Powered by Discuz! X3.3