多个边界

使用伪元素

您可以将伪元素放置在元素的后面，并使其更大，以其自身的背景产生边框效果，或者使其更小且位于内部（但请确保内容位于顶部）。

需要多个边界的元素应具有自己的边界和相对位置。

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

次边界添加了伪元素。 通过绝对定位进行设置，并使用上/左/下/右值进行插入。 它也将带有边框，并通过为其赋予负的z-index值而保留在内容下方（例如，保留文本的选择性和链接的可单击性）。 小心负Z索引，如果它在另一个具有其自身背景色的元素内，则可能无法工作。

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

在CodePen上查看Chris Coyier （ @chriscoyier ）的Pen 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 （ @chriscoyier ）的Pen xbgreX 。

使用裁剪的背景

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

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

在输入上：

看到笔上<输入>双边界效应由Chris Coyier（ @chriscoyier上） CodePen 。

翻译自: https://css-tricks.com/snippets/css/multiple-borders/