css 模拟表格斜线

当前位置 : 首页 > 网页制作 > CSS > css 模拟表格斜线

css 模拟表格斜线

来源: 作者: 时间:2015-12-07 14:04
利用div+css模拟表格的对角线,效果还可以,原理就是利用容器border宽度大于1时,相邻表格之间相接处是斜线的原理。
利用div+css模拟表格的对角线,效果还可以,原理就是利用容器border宽度大于1时,相邻表格之间相接处是斜线的原理。
一般情况下,border都是同样的颜色,很少会注意到这个问题,但偏偏反向思考,或者是偶然的机会才会发现这个现象。下面是一个小例子,从中可以看出原理来。



提示:您可以先修改部分代码再运行

原理就在这里:

复制代码
代码如下:

border-left:#023060 10px solid; /*相邻的边框粗细大于1,并且颜色不相同*/
border-right:#366AA1 10px solid;
border-top:#0F2E4E 10px solid;
border-bottom:#548CC7 10px solid;

这样满足这样的条件,就会看到相接处有斜线产生。 对这个现象进一步拓展,利用绝对定位,便可制作出表格对角线。



提示:您可以先修改部分代码再运行
Tag:
上一篇:[Div+CSS教程]
下一篇:hr 样式实现1px直线
网友评论

<