是否有简写为CSS边框的每一侧设置不同的颜色/样式/宽度？

Question

我想为CSS边框的每一侧设置不同的颜色/样式/宽度。

那是否有空缺？

Answer 1

您必须声明每个单边框：

.my-box {
  border-top: 1px solid red;
  border-left: 3px dashed black;
  border-right: 2px dotted violet;
  border-bottom: 1px solid #cccccc;
}

如果您愿意，可以只覆盖不同风格的边框：

.my-box {
  border: 1px solid red;
  border-right: 2px dotted violet;
}

Answer 2

你能得到的最接近的是：

selector
{
    border-width: 1px 2px 3px 4px;
    border-style: solid;
    border-color: #f00 #0f0 #00f #f0f
}

虽然如果你有一个大致统一的边框，一边不同，例如，我会选择daveoncode的答案。

Answer 3

不，快捷方式仅适用于一个边框。如果这些边框不同，则无法在一个快捷方式中为所有边框拟合宽度，样式和颜色。有一些像

这样的东西会很高兴

border: 1px solid Red, 2px solid Green, 2px solid darkgeen, 1px solid Pink;

但事实并非如此。对于上面的示例，您必须执行以下操作：

border: 1px solid Red;
border-right: 2px solid Green;
border-bottom: 2px solid darkgreen;
border-left-color: Pink;