CSS 双层边框，外边框比内边框粗

在本文中，我们将介绍如何使用CSS实现双层边框，其中外边框比内边框要粗。

阅读更多：CSS 教程

什么是双层边框？

双层边框是在一个HTML元素周围创建两个边框的效果。外边框通常比内边框更宽。这种效果可以为网页元素增加一些视觉上的深度和层次感，使其更加引人注目。

实现双层边框的方法

要实现双层边框效果，我们可以使用CSS的伪元素 ::before 和 ::after。下面是实现双层边框的基本步骤：

首先，选择要添加双层边框的HTML元素，并为其设置position属性的值为relative，以便伪元素相对于该元素进行定位。

.element {
  position: relative;
}

创建外层边框的伪元素 ::before，并为其设置样式。在本例中，我们将外层边框的颜色设置为红色，宽度为5像素。

.element::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 5px solid red;
  box-sizing: border-box;
}

创建内层边框的伪元素 ::after，并为其设置样式。在本例中，我们将内层边框的颜色设置为蓝色，宽度为3像素。

.element::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border: 3px solid blue;
  box-sizing: border-box;
}

最后，使用z-index属性将内层边框放在外层边框的上面。

.element::before {
  z-index: 1;
}
.element::after {
  z-index: 2;
}

上述步骤完成后，您就可以在HTML元素的周围看到一个外层边框比内层边框更粗的双层边框效果。

示例

下面是一个实际的示例，演示了如何使用CSS创建一个双层边框的效果：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      position: relative;
      width: 200px;
      height: 200px;
      background: #f2f2f2;
    }

    .box::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 5px solid red;
      box-sizing: border-box;
    }

    .box::after {
      content: "";
      position: absolute;
      top: 5px;
      left: 5px;
      width: calc(100% - 10px);
      height: calc(100% - 10px);
      border: 3px solid blue;
      box-sizing: border-box;
    }

    .box::before {
      z-index: 1;
    }

    .box::after {
      z-index: 2;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

在上面的示例中，我们创建了一个类名为box的HTML元素，并通过CSS样式为其设置了双层边框效果。外层边框为红色，内层边框为蓝色。