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

视觉效果如下：

实现这个效果主要用到的是<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"  使外层大表格的下边和右边变成了白色，使每个单元格的上边和左边变成了白色

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

时间： 2024-11-08 21:00:03

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

CSS3文字立体效果

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>非常棒的CSS3立体效果</title> </head> <body> <div><A href="http://www.999jiujiu.com/">http://www.999j

windows之实现3D立体效果的三种方法

第一种:快捷键:win+tab 第二种:cmd输入rundll32.exe dwmapi #105 第三种:使用软件bumptop windows之实现3D立体效果的三种方法

position:static(静态定位) 当position属性定义为static时,可以将元素定义为静态位置,所谓静态位置就是各个元素在HTML文档流中应有的位置 podisition定位问题.所以当没有定义position属性时,并不说明该元素没有自己的位置,它会遵循默认显示为静态位置,在静态定位状态下无法通过坐标值(top,left,right,bottom)来改变它的位置. position:absolute(绝对定位) 当position属性定义为absolute时,元素会脱离文档流

button按钮下边框有立体效果样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <style> .Button { display: inline-block; margin: 0; min-width: 100px; padding:

立体效果文字

public void paint(Graphics g) { int x=100; int y=100; String str=new String("mafeng"); g.setColor(Color.darkGray); Font font =new Font("华文行楷",Font.BOLD,72); g.setFont(font); for(int i=0;i<8;i++){ x++; y++; g.drawString(str, x, y); i

如何创作按钮被从纸上掀起的立体效果

效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/KRbXGe 可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/c/c3e8dCB 源代码下载本地下载每日前端实战系列的全部源代码请从 github 下载: https://github.com/comeh

26.纯 CSS创作按钮被从纸上掀起的立体效果

原文地址:https://segmentfault.com/a/1190000014930183 感想:主要2D和3D转换.阴影效果. HTML代码: <nav> <ul> <li>Home</li> <li>Products</li> <li>Services</li> <li>Contact</li> </ul> </nav> CSS代码: html, bod

睁开双眼玩立体游戏 3D显示技术解析

3D游戏的渲染原理以及立体化需求 [泡泡网显卡频道1月12日] 不知道您或您的朋友有没有过这样的经历:在刚开始玩CS类FPS游戏的时候,会不由自主的左右摇晃身体,用以观察躲在屏幕边缘和角落的敌人,经过多次尝试之后才会明白,原来侧着身体并不能看到屏幕外的物体.之所以会产生如此可笑的举动,是因为大家玩游戏太投入了,还真以为3D游戏就是三维立体的. 尽管我们玩的确实是3D游戏,但这个3D是针对电脑内部显卡渲染过程而言,对于玩家来说,我们看到的图像是电脑内部三维物体"投影"到显示器上的一帧帧二

Android 3D滑动菜单完全解析，实现推拉门式的立体特效

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/10471245 在上一篇文章中,我们学习了Camera的基本用法,并借助它们编写了一个例子,实现了类似于API Demos里的图片中轴旋转功能.不过那个例子的核心代码是来自于API Demos中带有的Rotate3dAnimation这个类,是它帮助我们完成了所有的三维旋转操作,所有Matrix和Camera相关的代码也是封装在这个类中. 这样说来的话,大家心里会不会痒痒的呢?虽然