视觉效果如下：

实现这个效果主要用到的是<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. 探索软件工程道路上的我 V (Θ∀Θ＃)

    开发语言:Java 开发工具:UltraEdit 小伙伴博客:http://www.cnblogs.com/hyating/ github地址:https://github.com/JUNYU217/ ...

  2. oracle实现split函数功能

    转载: http://blog.csdn.net/jojo52013145/article/details/6758279在实际的应用中,为了让PL/SQL 函数返回数据的多个行,必须通过返回一个 R ...

  3. Java高级规范之二

    二十一.提交java代码前应该检查是否有没用的语句,如:System.out.println(); jsp页面上面是否有alert调试信息 不规范示例:暂无 规范实例:暂无 解析:因为如果保留了有可能 ...

  4. word2vec

    makegcc word2vec.c -o word2vec -lm -pthread -O3 -march=native -Wall -funroll-loops -Wno-unused-resul ...

  5. Cantor的数表

    题目描述 如下数列,前5项分别是1/1,1/2,2/1,3/1,2/2…….输入n,输出第n项. 1/1   1/2   1/3   1/4   1/5 2/1   2/2   2/3   2/4 3 ...

  6. Java笔记7-多态父类静态

    多态的应用-面向父类编程 1.对象的编译时类型写成父类 2.方法的返回类型写成父类 3.方法的参数类型写成父类 编译时类型:对象的声明时类型,在于编译期间 运行时类型:new运算符后面的类型 编译时类 ...

  7. 11个提问频率最高的PHP面试题

    问题:请用最简单的语言告诉我PHP是什么? 回答:PHP全称:Hypertext Preprocessor,是一种用来开发动态网站的服务器脚本语言. 问题:什么是MVC? 回答:MVC由Model(模 ...

  8. 只需三步 快速完善网站Sitemap

    越来越多的SEOer把优化的重点放在了站内优化上,细心的朋友应该查看一些前辈的robots.txt的时候不难发现,他们的robots中都加 入了一句Sitemap: http://www.dewang ...

  9. UNITY更新到5后设置的动画无法播放了怎么办

    点击对应的animator,将 apply root motion  这个选项的勾去掉就可以了,纠结了很久最后在UNITY官方论坛找到的答案

  10. redis入门笔记(2)

    redis入门笔记(2) 上篇文章介绍了redis的基本情况和支持的数据类型,本篇文章将介绍redis持久化.主从复制.简单的事务支持及发布订阅功能. 持久化 •redis是一个支持持久化的内存数据库 ...