视觉效果如下：

实现这个效果主要用到的是<table>标签的bordercolorlight和bordercolordark两个属性。不过在测试的过程中，我发现有的浏览器不支持这两个属性，比如我用的UC浏览器。但我更换成IE浏览器过后，就得到了我想要的立体效果。

注：如果要使用这两个属性，前提必须是border的值大于1.

代码如下：

 <!DOCTYPE html>

 <html lang="en">

     <head>

     <meta charset="UTF-8">
     <title>test</title>

     </head>

     <body>

         <table bgcolor="gray" border="2px" width="500px" height="250px" align="center" cellspacing="5px" cellpadding="5px" bordercolorlight="black" bordercolordark="white">
         <caption><b>凸起的立体效果表格</b></caption>
         <br />
             <tr>
                 <td>TouchSky</td>
                 <td>TouchSky</td>
                 <td>TouchSky</td>
             </tr>

             <tr>
                 <td>TouchSky</td>
                 <td>TouchSky</td>
                 <td>TouchSky</td>
             </tr>

             <tr>
                 <td>TouchSky</td>
                 <td>TouchSky</td>
                 <td>TouchSky</td>
             </tr>

             <tr>
                 <td>TouchSky</td>
                 <td>TouchSky</td>
                 <td>TouchSky</td>
             </tr>

         </table>

     </body>
 </html>

那么为什么使用了bordercolorlight和bordercolordark两个属性以后，可以产生凸起的立体效果呢？

bordercolorlight="black" 使外层大表格的左边和上边变成了黑色，使每个单元格的下边和右边变成了黑色
bordercolordark="white"  使外层大表格的下边和右边变成了白色，使每个单元格的上边和左边变成了白色

通过这两个属性结果的中和，就给人造成了视觉上的凸起感受。而要达到凹起效果只需要将白色和黑色对调一下就可以了

用HTML实现凸（凹）起的立体效果的表格的更多相关文章

  1. 表格table常见的边框设置和初步的立体效果

    做网页时经常会遇到表格,常见的表格如下: <style type="text/css"> .tbtest0 { width:500px; height:200px; b ...

  2. WPF绘制党徽(立体效果,Cool)

    原文:WPF绘制党徽(立体效果,Cool) 前面用WPF方式绘制了党旗(WPF制作的党旗) ,去年3月份利用C# 及GDI+绘制过党徽,这次使用WPF来绘制党徽. ------------------ ...

  3. CSS3文字立体效果

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  4. 3D旋转仿伪3D立体效果，手机端

    偶然在书上看到这段代码,感觉很舒服,直街附代码吧,原生JS.手机端旋转效果仿立体效果. 纯JS代码足够了. var img=document.createElement('img'); img.set ...

  5. WPF中制作立体效果的文字或LOGO图形(续)

    原文:WPF中制作立体效果的文字或LOGO图形(续) 上篇"WPF中制作立体效果的文字或LOGO图形"(http://blog.csdn.net/johnsuna/archive/ ...

  6. WPF中制作立体效果的文字或LOGO图形

    原文:WPF中制作立体效果的文字或LOGO图形 较久之前,我曾写过一篇:"WPF绘制党徽(立体效果,Cool) "的博文.有感兴趣的朋友来EMAIL问是怎么制作的?本文解决此类问题 ...

  7. 使用CSS3制作立体效果的导航菜单

    效果如下: 也可以点击网址查看效果:http://keleyi.com/keleyi/phtml/html5/12.htm 请使用支持CSS3的浏览器访问本页面,获得更好效果. 源代码: <st ...

  8. 【javascript实例】 具有立体效果的图片浏览器

    此实例,直接粘贴代码即可运行,当然图片的路径不要忘记改了. 此实例是我一遍学习一边写出来的,希望能够帮到大家,一起学习.效果如图所示: html代码如下所示: <html xmlns=" ...

  9. windows之实现3D立体效果的三种方法

    第一种:快捷键:win+tab 另外一种:cmd输入rundll32.exe dwmapi #105 第三种:使用软件bumptop

随机推荐

  1. 软件测试第二次作业——Fault,Failure,Error辨析与设计测试用例

    Fault 静态错误 ,Failure 外部错误 ,Error 内部错误 问题答案 第一题 1.1 当数组x内的元素≥2时,该循环不会检测到x[0]这个元素. 1.2 test: x=[2, 3, 2 ...

  2. 如何开发、调试Hybrid项目-- 入门篇

    前言 随着移动浪潮的兴起,各种APP层出不穷,极速的业务扩展提升了团队对开发效率的要求,这个时候使用IOS&Andriod开发一个APP似乎成本有点过高了,而H5的低成本.高效率.跨平台等特性 ...

  3. Django1.3 创建项目

    经历了各种失败各种烦恼以后Django开发环境终于搭建好了! 系统环境:ubuntu12.04    Django版本1.3.1   Python版本 2.7.3 接下来就兴建一个项目练习一下 1.创 ...

  4. 黑马----JAVA迭代器详解

    JAVA迭代器详解 1.Interable.Iterator和ListIterator 1)迭代器生成接口Interable,用于生成一个具体迭代器 public interface Iterable ...

  5. 进入meta模式关闭背光灯

    1. 修改文件: mediatek/platform/mt6582/lk/boot_mode.c 2. 修改内容: boot_mode_select()函数: mt65xx_blacklight_of ...

  6. 用python+selenium抓取豆瓣电影中的正在热映前12部电影并按评分排序

    抓取豆瓣电影(http://movie.douban.com/nowplaying/chengdu/)中的正在热映前12部电影,并按照评分排序,保存至txt文件 #coding=utf-8 from ...

  7. VTK的学习资源

    本文介绍从哪儿开始学习VTK(Visualization Toolkit的简称),如何在网上找寻VTK的学习资源. 首先,可以到维基百科或者百度百科上查看VTK条目,了解VTK是什么. http:// ...

  8. 华为U8810的用户如何获取ROOT权限详细教程

    由于在论坛里看到有人在找这个手机的详细的root教程,所以刷机啦小编在这里整理了一下方便新手来操作,其实这个手机root起来还是蛮简单的,只需要一个root软件就可以了,相当于一键root了,在这里整 ...

  9. pthread_create 内存释放

    run() { pthread_attr_destroy(&m_attr);    pthread_detach(pthread_self()); }

  10. 无法识别的配置节 connectionStrings

    那啥,asp.net不支持connectionStrings.把IIS中的版本换成2.0或以上就OK了.