视觉效果如下：

实现这个效果主要用到的是<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. 库函数API和C语言汇编语言混合式编程

    C语言代码内嵌汇编的方法: 在C语言文件中以如下格式加入汇编代码 __asm__( “汇编语句模板” :输出部分 :输入部分 :“破坏描述部分” ) asm可以由__asm__代替,为其别名. 可加上 ...

  2. 救援linux

    挂载分区 mount /dev/sdaX /mnt/ 挂载其他 mount --bind /dev/ /mnt/dev/ mount --bind /proc/ /mnt/proc/ mount -- ...

  3. <转>思考力是万力之源

    做任何事情,要懂得积累和总结 每天进步一点点,一年365天下来就不得了   来自为知笔记(Wiz)

  4. wordpress视频教程

    wordpress还不错的一套自动赚钱视频教程 http://www.ggfenxiang8.com/?p=256

  5. 如何清除SQL Server Management Studio的最近服务器列表

    SQL Server Management Studio (SSMS) 的"连接到服务器"对话框会记录用户所有访问过的服务器名称,这个功能对于经常连接多个数据库的人来说确实挺方便的 ...

  6. S2SH+mysql-软件开发实际部署问题-8个小时后提示MYSQL数据库无法连接

    type Exception report message description The server encountered an internal error () that prevented ...

  7. java hook

    linux下 hook的触发,需要 发送信号为15. 后续补充具体内容.

  8. ActiveMQ的初夜

    Producer Flow Control mq自己实现了Flow Control(流量控制,默认开启),在mq的版本中,4.x和5.x流量控制实现原理并不相同,前者通过 TCP Flow Contr ...

  9. linux 64位调用

    linux系统中64位汇编和32位汇编的系统调用主要有以下不同:(1)系统调用号不同.比如x86中sys_write是4,sys_exit是1:而x86_64中sys_write是1, sys_exi ...

  10. Codeforces Round #168 (Div. 2)

    A. Lights Out 模拟. B. Convex Shape 考虑每个黑色格子作为起点,拐弯次数为0的格子构成十字形,拐弯1次的则是从这些格子出发直走达到的点,显然需要遍历到所有黑色黑色格子. ...