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

视觉效果如下：

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

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

代码如下：

8 test

15 凸起的立体效果表格

18 TouchSky

19 TouchSky

20 TouchSky

24 TouchSky

25 TouchSky

26 TouchSky

30 TouchSky

31 TouchSky

32 TouchSky

36 TouchSky

37 TouchSky

38 TouchSky

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

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

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

layui数据表格（一：基础篇，数据展示、分页组件、表格内嵌表单和图片）
表格展示神器之一:layui表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...
定义html表格的大小和位置,点晴OA工作流表单设计：表格table及宏控件的HTML、CSS、字体参数教程详解...
点晴OA工作流表单设计:表格table及宏控件的HTML.CSS.字体参数教程详解说明:虽然点晴OA内置了强大的富文本编辑器,但是很多时候还是难以实现理想的精确显示效果,为了实现满意的显示效果,网 ...
图片识别表格的方法有哪些？试试这几个好用的表格识别软件
随着数字化时代的到来,越来越多的公司和个人需要处理大量的表格数据.这些数据往往以图片的格式存在,而手动输入这些数据非常耗费时间和精力.因此,图片识别表格软件正在成为一个不可或缺的工具.那么,图片识别表 ...
word表格分开快捷键_Word用快捷键插入删除、拆分、选中整个表格与上下移动行及光标...
在 Word 中,表格的许多操作都可以用快捷键:对整个表格来说,插入.删除.选中和拆分都可以用快捷键:对行列来说,插入.删除.移动光标.平均分布也都可以用快捷键,并且行还可以用快捷上下移动:单元格的拆 ...
word套用表格样式怎么设置_仿Word自动套用格式使用CSS设置表格样式实例
找一个虽然不是很好看,但设置起来比较复杂的吧:彩色底纹-强调文字颜色6 Word中的效果如图示: [样式分析]: Word中设置表格格式,主要是设置边框和底纹,可选定整个表格或者部分单元格右击→表格属 ...
python docx 设置表格字体和格式_python-docx修改已存在的Word文档的表格的字体格式方法...
搞了好几天的表格字体格式,一直想找一种能直接一次性修改表格所有字体格式的方法(函数),但是无论用什么方法都无法修改表格字体的格式,原因应该是已存在的文档本身就具有某种格式限制,制约着里面表格里面字体格 ...
ai边缘平滑_AI基础教程113：“效果”菜单之“画笔描边”（一）喷溅效果
从今天的AI基础教程开始,我们来讲解Illustrator"效果"菜单下的"画笔描边"效果组.今天要讲的是"画笔描边"效果组中的第一个效果: ...
android l 效果,[原]Android L中水波纹点击效果的实现
博主参加了2014 CSDN博客之星评选,帮我投一票吧. 前言前段时间android L(android 5.0)出来了,界面上做了一些改动,主要是添加了若干动画和一些新的控件,相信大家对view的 ...
python可以做表格文档吗_生活中的python-利用python-docx自动生成表格简化工作流程...
因为工作原因,需要经常往两个word模板里填写内容并生成新的word文件,模板大致如下图: 老的工作流程: 打开两个表,在表中对应位置填写个人信息,保存.这样一来,当需要填写的信息比较多的时候,工作就 ...
15.立体几何——立体，基本概念，随机点立体图，立体估计深度_2
目录立体基本概念随机点立体图立体估计深度立体从一些队列,阴影,纹理,焦点等估计形状的一般方法. 很长一段时间,这对计算机视觉来说是一个大问题,它被称为X形状.在70年代末,80年代早期很受 ...

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

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

最新文章

热门文章