如何使用 CSS 指定双边框？

在网页设计中，我们常常需要为元素添加边框。然而，单一的边框有时候可能不足以满足我们的需求。这时候，我们可以考虑使用双边框。

CSS 提供了 border-style 属性，它允许你指定一个或多个边框的样式。结合 border-width 属性和 border-color 属性，我们就可以轻松地创建出双边框了。

下面是一个简单的例子：

.double-border {
  border-style: solid;
  border-width: 3px;
  border-color: #ccc #000 #ccc #000;
}

在上面的例子中，我们创建了一个名为 double-border 的类，并将其应用于某个元素上。该类中的三个属性都是用来定义边框的样式的。border-style 属性被设置为 solid，这意味着我们要画一个实线的边框。border-width 属性被设置为 3px，这意味着我们要画一个宽度为 3px 的边框。border-color 属性被设置为 #ccc #000 #ccc #000，这意味着我们要画一个由灰色和黑色相间的双边框。

接下来，我们将在不同的应用场景中介绍双边框的更多用法。

双边框的样式

除了 solid 以外，CSS 还支持多种边框样式，包括 dotted、dashed、double 等等。下面是一个用 dotted 样式画的双边框：

.double-border-dotted {
  border-style: dotted;
  border-width: 3px;
  border-color: #ccc #000 #ccc #000;
}

双边框的间距

如果我们想要让双边框之间有一些间距，可以使用 border-spacing 属性。该属性指定了边框之间的间距，它只对表格有效。

table {
  border-collapse: separate;
  border-spacing: 10px;
}

.double-border-spacing {
  border-style: solid;
  border-width: 3px;
  border-color: #ccc #000 #ccc #000;
}

双边框的宽度

有时候，我们希望双边框的宽度可以自由调整，这时候可以将 border-width 属性设置为一个函数：

.double-border-width {
  border-style: solid;
  border-width: 3px 5px 3px 5px;
  border-color: #ccc #000 #ccc #000;
}

.double-border-func {
  border-style: solid;
  border-width: calc(3px + 2em) calc(5px + 2em) calc(3px + 2em) calc(5px + 2em);
  border-color: #ccc #000 #ccc #000;
}

在上面的例子中，我们定义了两个类 double-border-width 和 double-border-func，它们的区别在于 border-width 的值不同。double-border-width 的值是 3px 5px 3px 5px，而 double-border-func 的值是 calc(3px + 2em) calc(5px + 2em) calc(3px + 2em) calc(5px + 2em)。利用函数，我们可以轻松地调整双边框的宽度以适应不同的场景。

双边框的角度

最后，我们也可以通过 border-radius 属性来为双边框添加弧度。该属性用于设置边框的圆角半径，它会将边框的角部分切割成一个圆。

.double-border-radius {
  border-style: solid;
  border-width: 3px;
  border-color: #ccc #000 #ccc #000;
  border-radius: 10px;
}

上面的例子中，我们在 border-radius 属性中设置了一个 10px 的值，表示边框的角部分要被切割成一个半径为 10px 的圆。

参考资料：

1. CSS Border Style
2. CSS Border Spacing
3. CSS Border Width
4. CSS Border Radius