用CSS怎么解决边框线重复的问题

html-css010

用CSS怎么解决边框线重复的问题,第1张

如果是表格，可以通过border-collapse: collapse来让线重合；

如果是div之类的非表格标签，要么用外间距（margin）分开，要么设置边的时候只设置一个方向，比如border-left

tab标签做为一个div（以下 称 tdiv）

里面是ul li 结构

内容作为另一个div (以下称 cdiv)

原理就是让 tdiv 成为非标准流！

具体做法，

先让两个div上下并在一起，

cdiv都有边框！

tdiv没有下边框！

然后

tdiv上的css加入(加入边框宽度为1px)

position:relativetop:1px

意思就是让tdiv成为非标准流，并且是相对定位，top:-1px

就是让tdiv从原来的位置向下偏移 1px

当点击tab的时候，就用js让激活的tab（也就是li)拥有下边框，并且为白色!

效果就出来了

其实就是白色的边框挡住了cdiv蓝色的边框