html表格立体效果,用HTML实现凸（凹）起的立体效果的表格

视觉效果如下：

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

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

代码如下：

1

2

3

4

5

6

7

8 test

9

10

11

12

13

14

15 凸起的立体效果表格

16

17

18 TouchSky

19 TouchSky

20 TouchSky

21

22

23

24 TouchSky

25 TouchSky

26 TouchSky

27

28

29

30 TouchSky

31 TouchSky

32 TouchSky

33

34

35

36 TouchSky

37 TouchSky

38 TouchSky

39

40

41

42

43

44

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

bordercolorlight="black" 使外层大表格的左边和上边变成了黑色，使每个单元格的下边和右边变成了黑色bordercolordark="white" 使外层大表格的下边和右边变成了白色，使每个单元格的上边和左边变成了白色通过这两个属性结果的中和，就给人造成了视觉上的凸起感受。而要达到凹起效果只需要将白色和黑色对调一下就可以了