视觉效果如下：

实现这个效果主要用到的是<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. Blender2.5快捷键

    General--通用 ESC Stops ongoing operation--停止当前操作 TAB Toggles Edit/Object mode--切换编辑/物体模式 ZKEY Toggles ...

  2. Configure the Windows Firewall to Allow SQL Server Access

    参考微软链接: https://msdn.microsoft.com/zh-tw/library/cc646023.aspx

  3. (转）浅析JS运行机制

    原文 从一个简单的问题谈起: 1 <script type="text/javascript"> 2 alert(i); // ? 3 var i = 1; 4 < ...

  4. Nginx 开启gzip 压缩

    随着nginx的发展,越来越多的网站使用nginx,因此nginx的优化变得越来越重要,今天我们来看看nginx的gzip压缩到底是怎么压缩的呢? gzip(GNU-ZIP)是一种压缩技术. 经过gz ...

  5. OGRE启动过程详解（OGRE HelloWorld程序原理解析）

    本文介绍 OGRE 3D 1.9 程序的启动过程,即从程序启动到3D图形呈现,背后有哪些OGRE相关的代码被执行.会涉及的OGRE类包括: Root RenderSystem RenderWindow ...

  6. jQuery获取带点的id元素

    一般jQuery获取某个id为elem元素,只需用$('#elem')就行了,但是如果id中不小心包括了'.' ,那么我吗就会发现这时候jQuery就不能获取到这个元素了.但是使用dom原生的getE ...

  7. Lua table库整理（v5.1）

    这个库提供了表处理的通用函数. 所有函数都放在表 table. 无论何时,若一个操作需要取表的长度, 这张表必须是一个真序列. table.concat(list, [, sep, [, i , [, ...

  8. UML(一) 类图及类间关系

    原创文章,同步发自作者个人博客,http://www.jasongj.com/uml/class_diagram/ UML类图 UML类图介绍 在UML 2.*的13种图形中,类图是使用频率最高的UM ...

  9. ion-refresher 下拉更新数据

    使用指令ion-refresher可以为容器eg:ion-scroll 和 ion-content进行拉动刷新 <ion-scroll> <ion-refresher on-refr ...

  10. Java8新特性--lamada详解

    最近玩了一下这个,感觉挺有趣的,语法使用起来很简洁,让代码看起来挺清爽易读的. 看了一下源码,发现挺充分的利用了jak1.5的特性(注解.泛型). 但是,具体的实现流程还是有点不通透,先Mark,等用 ...