如何在元素的三侧添加边框？

前几天我看到了一段关于此的小讨论，并认为看看所有不同的实现方式会很有趣。 它们都不特别复杂，但也许你会因为语法清晰度、效率或其他原因而偏爱其中一种。

假设我们想要在元素的底部、左侧和右侧（但不是顶部）添加边框。

显式声明每一侧

.three-sides {
  border-bottom: 2px solid black;
  border-right:  2px solid black;
  border-left:   2px solid black;
}

虽然这很清楚，但它仍在使用简写形式。 完全展开后将如下所示

.three-sides {
  border-bottom-color: black;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  
  border-left-color: black;
  border-left-style: solid;
  border-left-width: 2px;
  
  border-right-color: black;
  border-right-style: solid;
  border-right-width: 2px;
}

去除其中一侧

您可以通过使用简写声明所有四边的边框，然后删除不需要的那一边来节省一些代码

.three-sides {
  border: 2px solid black;
  border-top: 0;
}

仅使用简写设置宽度

.three-sides {
  border-color: black;
  border-style: solid;
  /* top, right, bottom, left - just like margin and padding */
  border-width: 0 2px 2px 2px;
}

作为一个有趣的小插曲，您无需声明边框颜色即可显示边框，因为颜色将继承 currentColor！ 因此，这将正常工作

.three-sides {
  /* no color declared */
  border-style: solid;
  border-width: 0 2px 2px 2px;
}

如果您这样做，则将具有红色边框

.three-sides {
  border-color: red;
  border-style: solid;
  border-width: 0 2px 2px 2px;
}

奇怪但真实。

如果要显式添加颜色，可以混合和匹配简写形式，因此这将正常工作

.three-sides {
  border: solid green; 
  border-width: 2px 0 2px 2px;
}