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

 找回密码
 注册
搜索
打印 上一主题 下一主题

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

[复制链接]
跳转到指定楼层
1#
发表于 2010-3-17 11:22:25 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
纯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.   <div class="spiffyfg">
  9.     <!-- content goes here 内容贴这里 -->
  10.   </div>

  11.   <b class="spiffy">
  12.   <b class="spiffy5"></b>
  13.   <b class="spiffy4"></b>
  14.   <b class="spiffy3"></b>
  15.   <b class="spiffy2"><b></b></b>
  16.   <b class="spiffy1"><b></b></b></b>
  17. </div>
复制代码

手机版|大马资讯论坛  

GMT+8, 2024-12-5 11:49 , Processed in 0.026587 second(s), 12 queries , File On.

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表