如何在 CSS 中使用框阴影制作多个边框

在 CSS 中，我们可以使用框阴影(box-shadow)属性来创建类似于边框的效果，从而实现制作多个边框的效果。

CSS 框阴影属性

框阴影属性用于在元素周围创建阴影效果，格式如下：

box-shadow: h-shadow v-shadow blur spread color inset;

其中，各项参数的含义如下：

• h-shadow：水平阴影的位置，可正可负，必须指定。
• v-shadow：垂直阴影的位置，可正可负，必须指定。
• blur：模糊距离，可选，默认为 0。
• spread：阴影扩散的距离，可选，默认为 0。
• color：阴影颜色，可选，默认为黑色。
• inset：是否内阴影，可选，默认为外阴影。

制作多个边框

使用框阴影属性，我们可以制作多个边框的效果。具体步骤如下：

• 第一步，设置元素的宽高和背景颜色。

div {
  width: 200px;
  height: 100px;
  background-color: #fff;
}

• 第二步，利用框阴影属性创建多个边框。

div {
  /* 第一个边框 */
  box-shadow: 0 0 0 5px #f00,
              /* 第二个边框 */
              0 0 0 10px #0f0,
              /* 第三个边框 */
              0 0 0 15px #00f;
}

如上所示，我们可以通过逗号隔开多个框阴影属性，从而实现创建多个边框的效果。需要注意的是，需要按照顺序依次设置每个边框的样式。

完整代码如下：

div {
  width: 200px;
  height: 100px;
  background-color: #fff;
  box-shadow: 0 0 0 5px #f00,
              0 0 0 10px #0f0,
              0 0 0 15px #00f;
}

效果如下所示：

以上就是在 CSS 中使用框阴影制作多个边框的方法。