[分享]css两个边框怎么让他合起来

在 CSS 中，可以通过使用 border 属性来给元素添加边框。但是如果你需要添加的是两个边框呢？比如上下分别为红色和蓝色，左右是绿色和黄色，而且要让这两个边框合为一个。实现这个效果的方法是使用 o...

在 CSS 中，可以通过使用 border 属性来给元素添加边框。但是如果你需要添加的是两个边框呢？比如上下分别为红色和蓝色，左右是绿色和黄色，而且要让这两个边框合为一个。

实现这个效果的方法是使用 outline 属性。这个属性同样可以给元素添加边框，但是不会改变元素的实际大小和位置，并且可以叠加多个边框。

.box {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #eee;
  outline: 10px solid red;
}

.box:before {
  content: ';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 10px solid blue;
  z-index: -1;
} 

上面的代码中，我们首先给元素添加了一个 10px 的红色边框。然后使用伪元素 :before 来添加一个 10px 的蓝色边框，并把它设为元素的底层图层，这样两个边框就可以平滑地叠加在一起了。

需要注意的是，这种方法只适用于元素的宽度和高度已经确定的情况下。另外，如果需要添加更多的边框，可以使用类似的方式在伪元素中添加。