CSS样式中经常会碰到需要两个相邻的框之间消除边框或者线的情况。比如,我们经常需要用到表格,但是如果两个相邻的单元格之间有边框,就会让表格整体看起来很不美观。下面就介绍一下如何使用CSS消除相邻框之间
CSS样式中经常会碰到需要两个相邻的框之间消除边框或者线的情况。比如,我们经常需要用到表格,但是如果两个相邻的单元格之间有边框,就会让表格整体看起来很不美观。下面就介绍一下如何使用CSS消除相邻框之间的线。
//HTML代码 <div class="box"> <div class="box1">box1</div> <div class="box2">box2</div> </div> //CSS代码 .box { display: flex; justify-content: center; } .box1, .box2 { width: 100px; height: 100px; border: 1px solid #000; } .box1 { border-right: none; } .box2 { border-left: none; }
上面的代码中,我们用了一个div容器,里面包含了两个div框。我们给div容器设置了flex布局,这样可以让两个div框自适应宽度,并且水平居中。然后我们给box1和box2框设置了统一的宽高,并且都添加了1像素的黑色边框。但是,我们发现两个相邻的框之间有一条黑色线,这并不美观。
因此,我们需要消除掉相邻框之间的线。我们可以通过给box1框设置border-right:none,和给box2框设置border-left:none的方式来达到目的。这样,两个框就不会有相邻的边框,也就不会出现黑色线了。
粉丝
0
关注
0
收藏
0