三边框

如果您需要仅在元素的三侧添加边框，则有多种方法可以实现。

您可以专门声明仅三侧的边框

div { 
  border-top:    1px solid red;
  border-right:  1px solid red; 
  border-bottom: 1px solid red;
}

冗长，但易于理解。

或者，您可以只声明一个 border，它将覆盖所有四侧，然后移除您不需要的那一侧。

div {
  border: 1px solid red;
  border-left: 0;
}

更简洁，但依赖于理解并维护边框移除覆盖在边框声明之后。

或者，您可以声明颜色和样式，并使用简写形式仅 border-width 来专门声明三侧。

div {
  border-color: red;
  border-style: solid;
  border-width: 1px 1px 1px 0;
}

比第一个示例更简洁，但重复性较低。只需要注意，如果左侧边框获得了宽度，它将已经是红色和实线。

然后还有边框会影响常规盒模型下元素大小的事实。如果您想添加边框而不增加元素的大小，则需要依赖 CSS3。以下是如何使用内阴影来实现的方法

div {
  -webkit-box-shadow:
     inset -1px 0   0 red,
     inset  0  -1px 0 red,
     inset  0   1px 0 red;
  -moz-box-shadow:
     inset -1px 0   0 red,
     inset  0  -1px 0 red,
     inset  0   1px 0 red;
  box-shadow:
     inset -1px 0   0 red,
     inset  0  -1px 0 red,
     inset  0   1px 0 red;
}

但是，内阴影的浏览器支持远不如边框。例如，上面的代码仅在 Internet Explorer 9 及更高版本中有效。如果您更愿意使用边框，并且仍然不影响元素的大小，则可以尝试使用 box-sizing，它支持到 IE 8。

哦，选择！这是一件很小的事情，但我认为这是一个很好的例子，说明在 CSS 中通常有许多不同的方法可以实现相同的事情。如果您刚开始学习 CSS，这种事情会让您感到困惑还是非常简单呢？

查看所有示例。