视觉效果如下：

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

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

代码如下：

  1.  <!DOCTYPE html>
  2.  
  3.  <html lang="en">
  4.  
  5.      <head>
  6.  
  7.      <meta charset="UTF-8">
  8.      <title>test</title>
  9.  
  10.      </head>
  11.  
  12.      <body>
  13.  
  14.          <table bgcolor="gray" border="2px" width="500px" height="250px" align="center" cellspacing="5px" cellpadding="5px" bordercolorlight="black" bordercolordark="white">
  15.          <caption><b>凸起的立体效果表格</b></caption>
  16.          <br />
  17.              <tr>
  18.                  <td>TouchSky</td>
  19.                  <td>TouchSky</td>
  20.                  <td>TouchSky</td>
  21.              </tr>
  22.  
  23.              <tr>
  24.                  <td>TouchSky</td>
  25.                  <td>TouchSky</td>
  26.                  <td>TouchSky</td>
  27.              </tr>
  28.  
  29.              <tr>
  30.                  <td>TouchSky</td>
  31.                  <td>TouchSky</td>
  32.                  <td>TouchSky</td>
  33.              </tr>
  34.  
  35.              <tr>
  36.                  <td>TouchSky</td>
  37.                  <td>TouchSky</td>
  38.                  <td>TouchSky</td>
  39.              </tr>
  40.  
  41.          </table>
  42.  
  43.      </body>
  44.  </html>

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

  1. bordercolorlight="black" 使外层大表格的左边和上边变成了黑色，使每个单元格的下边和右边变成了黑色
  1. 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. flash2x、flax

    http://flax.so/ 牛客网 LeetCode Online Judge

  2. android view : 绘制

    说到绘制,其实就是如何把一个view的对象,变成手机上可视的图形.很多人总结3个过程:测量,布局,绘制.这也是所有的要显示图形的程序所应该抽象的3个步骤,测量就是测量出你view的大小,布局就是要显示 ...

  3. javascript常用数组算法总结

    1.数组去重 方法1: JavaScript //利用数组的indexOf方法 function unique (arr) { var result = []; for (var i = 0; i & ...

  4. (原创)基于CloudStack的平安云-云主机的生命周期

    一.购买云主机1.条件筛选   涉及环境.应用系统.区域.网络.操作系统.套餐.期限.数量筛选2.校验   2.1 应用系统角色权限校验   2.2 应用系统可用配置校验   2.3 产品区域是否下架 ...

  5. Python学习-day1

    Mark一下,python学习. 今天一天已1.5x的速度看完了Alex老师的第一周的视频,先是4节鸡汤课,而且给了勺,讲述了python目前在世界的地位,发展趋势,以及未来的愿景. 最重要的还是写一 ...

  6. android 手机屏幕有关的几个工具(屏幕宽高,dp和px互相转换)

    平时适配页面时经常会需要根据屏幕的宽高来设置控件的大小,很多时候在代码中还会需要dp和px互相转换. 今天把最常用的几个记录一下,经测试包括2.3 ~ 5.0之间的版本都可用,其他版本未测,不过应该也 ...

  7. java的覆盖重写隐藏和C#中的不同

    先看下C#中的: C#中覆盖 隐藏 重写这三种有不同的意义,而Java中不同. 1. java中没有new ,使用new会报错,编译不通过. 2. java中重写和覆盖应该是一个意思 static c ...

  8. pyodbc不支持使用%，应该使用？

    pyodbc不支持使用%,应该使用? 如: Sql插入语句cur.execute("INSERT INTO bb VALUES (?,?,?)","s",&qu ...

  9. 深入理解javascript--笔记

    书写可维护的代码 1,最小全局变量   在js中不用声明变量就可以直接使用,因此注意不要没有声明就使用.(无意中创建的全局变量)比如使用任务链进行var声明.var a=b=12;正确写法为var   ...

  10. 《C与指针》第十五章练习

    本章例程 15.1打开和关闭文件 #include <stdlib.h> #include <stdio.h> int main(int ac, char **av) { in ...