(更佳) 带圆角外边框的选项卡

一个好看的选项卡控件通常有一个特性，我一直发现无法在不使用图像的情况下重现：在每个选项卡底部向外弯曲的边框。在本文中，我将展示如何使用 CSS 的 :before 和 :after 伪元素在不使用图像的情况下创建此效果。首先，让我们从一些基本的标记开始。

标记

<ul class="tabrow">
   <li>Lorem</li>
   <li>Ipsum</li>
   <li class="selected">Sit amet</li>
   <li>Consectetur adipisicing</li>
</ul>

这将是尽可能基本的。这里没有很多元素可供使用，但足够了。

入门

要开始，让我们摆脱默认的 <ul> 和 <li> 样式，并让这些元素排成一行。

.tabrow {
  text-align: center;
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 24px;
}
.tabrow li {
  margin: 0 10px;
  padding: 0 10px;
  border: 1px solid #AAA;
  background: #ECECEC;
  display: inline-block;
}

选择选项卡

当然，选定的选项卡应该清晰可见。

.tabrow li.selected {
  background: #FFF;
  color: #000;
}

了解事情的底层

每个选项卡控件都需要一个明确定义的底部边缘。现在它不会做什么，但稍后它将有助于强调选定选项卡位于顶部的效果。

.tabrow {
  position: relative;
}
.tabrow:after {
  position: absolute;
  content: "";
  width: 100%;
  bottom: 0;
  left: 0;
  border-bottom: 1px solid #AAA;
  z-index: 1;
}

在这里，我们介绍了第一个 :after 伪元素。基本上，:after 在元素上追加另一个子元素。它不在 DOM 中（这就是它被称为伪元素的原因），所以它不是一个真正的子元素，但它是完全可样式化的，只要您添加一些 content，在这种情况下是一个空格字符。

在我看来，术语 :before 和 :after 有点令人困惑，因为伪元素实际上不是添加到它们应用到的元素之前或之后，而是作为子元素插入的。这也是为什么您不能将 :before 和 :after 应用于不能包含子元素的元素（“无内容”元素）的原因，例如 <input>。

在本例中，我们使用伪元素创建一个底部边框，它不会影响选项卡的定位。我们本可以在 <ul> 上添加一个底部边框，但这会让下一步变得更棘手。

超越

现在，一个令人信服的选项卡控件的必要部分是，选定的选项卡位于边缘前面，而其他选项卡位于边缘后面。为此，我们改变其底部边框，并进行一些 z-index 魔术。

.tabrow:before {
  z-index: 1;
}
.tabrow li {
    position: relative;
  z-index: 0;
}
.tabrow li.selected {
  z-index: 2;
  border-bottom-color: #FFF;
}

弯曲

现在是时候添加难以捉摸的向外弯曲的边框了，我们将为此使用 :before 和 :after。让我们一步一步地进行，首先只将所有内容都放在适当的位置。

.tabrow li:before,
.tabrow li:after {
  position: absolute;
  bottom: -1px;
  width: 6px;
  height: 6px;
  content: " ";
}
.tabrow li:before {
  left: -6px;
}
.tabrow li:after {
  right: -6px;
}
.tabrow li:after, .tabrow li:before {
  border: 1px solid #AAA;
}

不要那么方

您可能已经猜到会发生什么。让我们删除我们不想要的边框，并添加一些圆角。

.tabrow li {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.tabrow li:before {
  border-bottom-right-radius: 6px;
  border-width: 0 1px 1px 0;
}
.tabrow li:after {
  border-bottom-left-radius: 6px;
  border-width: 0 0 1px 1px;
}

切角

这个结果有点不对劲。让我们仔细看看。正如您所看到的，原始的直角和圆角都是可见的。我们需要以某种方式摆脱直角。为此，我们将用阴影将其遮盖起来。为了说明正在发生的事情，让我们让阴影更突出一些。

.tabrow li:before {
  box-shadow: 2px 2px 0 red;
}
.tabrow li:after {
  box-shadow: -2px 2px 0 red;
}

快到了

正如您所看到的，红色阴影完全覆盖了我们想要隐藏的方形角。如果我们给阴影赋予正确的颜色，幻觉就完成了。

.tabrow li:before {
  box-shadow: 2px 2px 0 #ECECEC;
}
.tabrow li:after {
  box-shadow: -2px 2px 0 #ECECEC;
}
.tabrow li.selected:before {
  box-shadow: 2px 2px 0 #FFF;
}
.tabrow li.selected:after {
  box-shadow: -2px 2px 0 #FFF;
}

点缀

现在剩下的就是添加一些渐变和阴影，让它更精致一些。

.tabrow li {
  background: linear-gradient(to bottom, #ECECEC 50%, #D1D1D1 100%);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
  text-shadow: 0 1px #FFF;
  margin: 0 -5px;
  padding: 0 20px;
}

如果您想知道浏览器兼容性，它与您预期的一样：除了 IE 之外。IE10 可能也能正常工作，但我没有机会使用预览版进行测试。由于 IE8 和 IE9 支持 :before 和 :after，但不支持 border-radius，因此如果您想为这些用户的提供良好的视觉体验，您需要为它们创建一个 单独的样式表。

查看演示   下载文件

编辑说明：我在演示中的选项卡内添加了锚链接，因为我认为这是使用这种选项卡导航的最有可能的情况。最有可能的是，它们会有一个 href 属性，该属性会链接到它们通过 id 关联的内容，而这种行为将由 JavaScript 控制。这个教程不需要锚链接来实现额外的伪元素，这进一步证明它比我的原始版本更好。

更新：Allan Watkins 向我发送了这些选项卡的变体，它们指向下方

查看 Chris Coyier 的 CodePen 上的笔 指向下方的圆角选项卡 (@chriscoyier) on CodePen.