多重边框

使用伪元素

您可以定位伪元素，使其位于元素的后面且更大，从而通过其自身的背景创建边框效果；或者更小且位于内部（但要确保内容位于顶部）。

需要多重边框的元素应该有它自己的边框和相对定位。

.borders {
  position: relative;
  border: 5px solid #f00;
}

次要边框使用伪元素添加。它使用绝对定位设置，并使用 top/left/bottom/right 值内嵌。通过赋予它负的 z-index 值，它也将具有边框，并保持在内容的下方（例如，保留文本的可选择性和链接的可点击性）。注意使用负的 z-index，如果它位于另一个具有自身背景颜色的元素中，这可能不起作用。

.borders:before {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 5px solid #ffea00;
}

查看 CodePen 上 Chris Coyier 的 gbgRqZ。

您也可以使用 `:after` 伪类来创建第三个边框。特别要注意，Firefox 3（3.6 之前的版本）会搞砸，因为它支持 `:after` 和 `:before`，但不允许它们使用绝对定位（因此看起来很奇怪）。

使用轮廓

虽然比边框限制更多（无论如何都围绕整个元素），但轮廓是一个额外的自由边框。

.borders {
  border: 5px solid blue; 
  outline: 5px solid red;
}

使用阴影

您可以通过设置阴影偏移量和 0 模糊来使用阴影创建边框效果。此外，通过用逗号分隔值，您可以创建任意数量的“边框”。

.blur {
  box-shadow:
    0 0 0 10px hsl(0, 0%, 80%),
    0 0 0 15px hsl(0, 0%, 90%);
}

查看 CodePen 上 Chris Coyier 的 xbgreX。

使用裁剪的背景

您可以使元素的背景在填充之前停止。这样一来，元素的普通边框就可以在某种程度上看起来像双重边框。

.borders {
  border: solid 1px #f06d06;
  padding: 5px;
  background-clip: content-box; /* support: IE9+ */
  background-color: #ccc;
}

在输入框上

查看 CodePen 上 Chris Coyier 的 在 `<input>` 上创建双重边框效果。