CSS中的outline 属性会在元素的外部画一条线。这与 [border](https://css-tricks.com/almanac/properties/b/border/)属性很相似，主要的例外是outline 并不是盒子模型的一部分。它经常被用于突出元素，例如， :focus 样式。
在这篇文章中，让我们给它加上一个点，靠着outline 的优点。
- 它们可以相互折叠（技巧！），因为它们在技术上 "不占空间"。
- 显示和隐藏轮廓，或者改变
[outline-width](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width)，不会触发布局（这对执行动画和过渡很有好处）。
更容易的假表单元格边框
下面是一个列表的例子，它被布置成一个网格，使它看起来有点像一个表格的布局。每个单元格都有一个最小的宽度，并且会随着容器的变宽/变窄而增长/缩小。
我们可以使用border 来完成这个任务，像这样。
CodePen嵌入回退
但是，为了使每个单元格周围有一个均匀的边框--永远不会加倍或缺失--这是一个繁琐的过程。上面，我在每个 "单元格 "的所有边框上使用了一个边框，然后用负边距将它们重叠起来，以防止加倍。这意味着剪掉了两边的边框，所以边框必须在父本上重新应用。如果你问我，太多繁琐的工作了。
即使是隐藏overflow ，也是一个很大的要求，你必须这样做，因为，否则，你会触发滚动条，除非你采用更厚的技巧，比如使用绝对位置的伪元素。
看看同样的结果，在视觉上，只是用outline 来代替。
CodePen嵌入回退
这里的代码要干净得多。没有真正的技巧在起作用。每个 "单元格 "只是在它周围有一个轮廓，仅此而已。
动画中的边框
改变border-width ，总是会触发布局，不管它是否真的需要。
CodePen嵌入回退
此外，由于Chrome对边框宽度的子像素的特殊处理，动画border-width 属性会使整个边框晃动（我认为这很奇怪）。Firefox没有这个问题。
CodePen嵌入回退
当涉及到边框的动画时，有优点也有缺点。请看Stephen Shaw不久前发表的关于性能影响的一个例子。
有一些问题
当然有。像大多数其他的CSS属性一样，在使用outline 属性时，有一些 "麻烦 "或需要知道的事情。
- 在撰写本文时，只有Firefox支持圆角轮廓。我想其他浏览器最终也会支持它们。
- 轮廓总是环绕_所有_的边。这就是说，它不是一个速记属性，比如说，
border；所以没有outline-bottom，等等。
但我们可以绕过这些限制!例如，我们可以使用添加一个没有模糊半径的box-shadow 作为替代。但是请记住：box-shadow 比使用outline 和border 的性能成本更高。
这就是了!
你是否总是在做一些需要用无序列表来伪造表格的工作？不太可能。但是我们可以使用outline ，而且它不参与盒子模型，这使得它很有趣，特别是在某些情况下作为border 的替代品。
也许像Chris几年前做的这个井字棋盘可以从outline ，而不是求助于单独制作的单元格边框中受益。接受挑战，Coyier先生？
The postUsing the `outline` Property as a Collapsable Borderappeared first onCSS-Tricks.
你可以通过成为MVP支持者来支持CSS-Tricks。
