使用`outline`属性作为可折叠边框

CSS 中的`outline`属性 在元素外部绘制一条线。这与`border`属性非常相似，主要区别在于`outline`不是盒子模型的一部分。它通常用于突出显示元素，例如，:focus样式。

在本文中，让我们重点关注`outline`的优势

1. 它们可以彼此折叠（技巧！），因为它们在技术上“不占用空间”。
2. 显示和隐藏轮廓，或更改`outline-width`，不会触发布局（这对高性能动画和过渡很有利）。

更轻松的伪表格单元格边框

下面是一个作为网格布局的列表示例，使其看起来有点像表格布局。每个单元格都有一个最小宽度，并且会随着容器变宽或变窄而增大或缩小。

我们可以使用`border`来实现这一点，如下所示

但为了在每个单元格周围创建均匀的边框（绝不重复或遗漏），这是一个繁琐的过程。在上面，我在每个“单元格”的四边都使用了边框，然后使用负边距来重叠它们并防止重复。这意味着在两边剪裁边框，因此必须在父元素上重新应用边框。如果你问我，这工作太繁琐了。

即使不得不隐藏`overflow`也是一个很大的要求，你必须这样做，否则，除非你采取更复杂的技巧，例如使用绝对定位的伪元素，否则你会触发滚动条。

查看相同的结果，视觉上，只使用`outline`代替

这里的代码要干净得多。没有真正的技巧在起作用。每个“单元格”只是在其周围有一个轮廓，仅此而已。

动画中的边框

更改`border-width`总是会触发布局，无论它是否真的需要。

此外，由于 Chrome 对边框宽度的亚像素特殊处理，动画`border-width`属性会导致整个边框抖动（我认为这很奇怪）。Firefox 没有这个问题。

动画边框有利有弊。查看 Stephen Shaw 的文章，了解性能影响的示例。

有一些需要注意的地方

当然有。与大多数其他 CSS 属性一样，在使用`outline`属性时，有一些“需要注意的地方”或需要了解的事情

1. 圆角轮廓只在撰写本文时在 Firefox 中受支持。我想其他浏览器最终也会支持它们。
2. 轮廓总是围绕所有边框。也就是说，它不是像`border`这样的简写属性；因此没有`outline-bottom`等等。

但是我们可以解决这些限制！例如，我们可以使用没有模糊半径的`box-shadow`作为替代方案。但请记住：`box-shadow`的性能成本高于使用`outline`和`border`。

就是这样！

你是否总是会做一些需要使用无序列表来模拟表格的事情？不太可能。但我们可以使用`outline`以及它在盒子模型中的不参与，使它很有趣，特别是在某些情况下作为`border`的替代方案。

也许像 Chris 几年前创建的这样的井字游戏棋盘可以从`outline`中受益，而不是诉诸于单独制作的单元格边框。接受挑战，Coyier 先生？😉