首页 > 代码库 > 用HTML实现凸（凹）起的立体效果的表格

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

2024-08-18 04:26:14   212人阅读

视觉效果如下：

技术分享技术分享

 

实现这个效果主要用到的是<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         
44     </body>
45 </html>

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

bordercolorlight="black" 使外层大表格的左边和上边变成了黑色，使每个单元格的下边和右边变成了黑色
bordercolordark="white"  使外层大表格的下边和右边变成了白色，使每个单元格的上边和左边变成了白色

通过这两个属性结果的中和，就给人造成了视觉上的凸起感受。而要达到凹起效果只需要将白色和黑色对调一下就可以了

 

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


联系
我们