[分享]css两个相邻盒子只加一个边框

CSS中，有时候我们需要在两个相邻的盒子之间只加上一个边框，而不是在两个盒子之间都加上一条边框。这种情况在界面设计中比较常见，比如网站的导航条菜单，或者是一些表格中的单元格之间需要加上边框。下面我们就...

CSS中，有时候我们需要在两个相邻的盒子之间只加上一个边框，而不是在两个盒子之间都加上一条边框。这种情况在界面设计中比较常见，比如网站的导航条菜单，或者是一些表格中的单元格之间需要加上边框。下面我们就来看看如何实现这种效果。

.box {
   border: 1px solid #ccc;
}

.box + .box {
   border-top: none;
} 

代码中，我们先为盒子添加了1像素的边框，然后使用相邻兄弟选择器 "+"来选择下一个兄弟元素。这里的 ".box + .box" 选择器表示，选取所有相邻的兄弟元素中，后面的元素（.box）加上一个上边框。由于第一个兄弟元素的上边框在前面已经定义过了，所以这里只添加后面元素的边框。

如果我们想在两个相邻的盒子之间添加下边框，则只需要继续添加一个 ".box + .box" 的选择器，并设置下边框即可。

.box {
   border: 1px solid #ccc;
}

.box + .box {
   border-top: none;
}

.box + .box {
   border-bottom: 1px solid #ccc;
} 

总结来说，使用相邻兄弟选择器能够很方便地实现在两个相邻盒子之间只加一个边框的效果。