视觉效果如下：

实现这个效果主要用到的是<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. SE homework2

    1. (1) Fault: for循环语句中的条件表达式i > 0,不能检查到数组的第一个元素,应该为 i >= 0 . (2) test:x=[]:y=3 Expected = -1 A ...

  2. Samba - 文件共享服务器的搭建和配置

    下载与安装: deb包安装 官方deb包下载:http://packages.ubuntu.com/ 命令安装dpkg –i xxxx.deb (安装不成功留意日志安装依赖包) apt安装 apt-g ...

  3. 第六周——分析Linux内核创建一个新进程的过程

    "万子恵 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 &q ...

  4. [转]Mathematical Induction --数学归纳法1

    Mathematical Induction Mathematical Induction is a special way of proving things. It has only 2 step ...

  5. 使用递归方法遍历TreeView的节点如配置则勾选

    自己在网上找了一段时间都没有找到取自数据库的值与TreeView中的节点值进行对比如匹配则勾选中CheckBox的资料,后面自己写了一个递归方法实现,现在记录起来以备需要时使用.在没写这递归方法前如果 ...

  6. hibernate中获得session的方式

    his.getsession实际上是调用了父类中的方法获得session.使用spring管理hibernate的SessionFactory的时候,这个方法会从session池中拿出一session ...

  7. NotePad++ 调试PHP代码中文显示乱码

    最近在NotePad++上调试PHP代码,按照示例代码进行调试,结果在显示中文的时候显示一堆乱码,于是上网百度,有2种方法可以解决: 按调试方式有2种方法: 1.菜单插件-NppExec: " ...

  8. RubyGems 镜像

    Gem Source 命令:   gem sources -a http://gems.ruby-china.org   gem sources -l

  9. 重装Ubuntu16.04及安装theano

    一.卸载现有的ubuntu系统 1.下载MbrFix,并放在C盘根目录. 2.管理员身份运行cmd命令符:切换到C盘根目录,然后输入命令符MbrFix /drive 0 fixmbr,回车确认即可. ...

  10. java问题排查可能用到的一些命令

    1. jmap查询jvm内存使用情况 -heap :打印jvm heap的情况 -histo: 打印jvm heap的直方图.其输出信息包括类名,对象数量,对象占用大小. -histo:live : ...