[分享]css两个框相邻的线消失

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的方式来达到目的。这样，两个框就不会有相邻的边框，也就不会出现黑色线了。