[分享]css中如何设置两个边框

CSS中可以通过设置两个边框来使元素更具有设计感。

.box {
  border: 4px solid #F7DAD9;
  padding: 20px;
  position: relative;
}

.box:before {
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  left: -5px;
  bottom: -5px;
  right: -5px;
  border: 2px solid #FFB6B9;
} 

上述代码中，我们首先给元素添加了一个4像素粉色边框，并给元素设置了20像素的内边距。接下来，我们使用了CSS伪元素:before来为元素创建了一个额外的边框，然后通过设置该伪元素的content属性为空，将其转变为一个块级元素。

接着，我们将该伪元素的位置属性设置为绝对定位，并设置top、left、bottom、right四个方向的位置值，使该伪元素与外层元素保持一致。然后，我们为该伪元素设置了一个2像素浅红色边框。

这样，我们就成功地为元素创建了一个4像素粉色边框和一个2像素浅红色边框的设计样式。