[分享]css两个边框粘连方法

CSS中可以通过两个边框粘连的方法来实现更加美观的边框效果。下面我们将介绍这两种常见的方法。 第一种方法是使用两个元素来实现两个边框的效果。代码如下： .pborder1 { : relative; ...

CSS中可以通过两个边框粘连的方法来实现更加美观的边框效果。下面我们将介绍这两种常见的方法。
第一种方法是使用两个元素来实现两个边框的效果。代码如下：

.p-border1 {
  position: relative;
  border: 1px solid #ccc;
  padding: 10px;
}
.p-border1::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 1px solid #ccc;
} 

以上代码中，我们给p元素添加了一个1像素的实线边框，并且将其内部的padding设置为10像素。接着，我们使用伪类::before来添加一个绝对定位的空元素，并将其向上、向左、向下、向右各2像素，这样就将它覆盖在实线边框上方，形成了两个边框的效果。
第二种方法是使用box-shadow来实现两个边框的效果。代码如下：

.p-border2 {
  border: 1px solid #ccc;
  padding: 10px;
  box-shadow: inset 0 0 0 1px #ccc, 0 0 0 1px #ccc;
} 

以上代码中，我们用border属性设置了1像素的实线边框，并设定了padding。接着，我们使用box-shadow添加了两个阴影，第一个阴影inset代表用内向投影来添加边框，第二个阴影则代表添加一个1像素的实线边框。
在这里需要注意的是，box-shadow方式可能会稍微耗费计算资源，因此在使用时需要根据具体情况进行优化。
总之，以上两个边框粘连方法都可以实现两个边框的效果，我们可以根据需要进行灵活运用。