CSS outline属性是一个令人困惑的属性。当你第一次了解它时，很难理解它与边界属性的区别。 W3C将其解释为具有以下差异：
- 大纲不占用空间。
- 轮廓可以是非矩形的。
大纲不占用空间
这种说法本身就令人困惑。网页上的对象如何不占用网页空间？但是，如果您认为您的网页像洋葱一样，页面上的每个项目可能会分层放在另一个项目之上。 outline属性不占用空间，因为它总是放在元素框的顶部。
当轮廓围绕元素放置时，它对该元素在页面上的布局方式没有任何影响。它不会改变元素的大小或位置。如果在元素上添加轮廓，它将占用相同的空间量，就好像您没有该元素的轮廓一样。边境不是这样。元素上的边框将添加到元素的外部宽度和高度。因此，如果您的图像宽度为50像素，边框为2像素，则需要54像素（每边边框为2像素）。具有2像素轮廓的相同图像在页面上仅占用50像素宽度，轮廓将显示在图像的外边缘上。
轮廓可能是非矩形的
在你开始思考“酷，现在我可以画圆圈”之前，再想一想。该陈述与您的想法有不同的含义。当您在元素上放置边框时，浏览器会将该元素解释为一个巨大的矩形框。如果框被分割成几行，浏览器只会打开边缘，因为框没有关闭。就好像浏览器看到的边框有一个无限宽的屏幕 - 宽度足以使该边框成为一个连续的矩形。
相反，outline属性考虑了边缘。如果轮廓元素跨越多行，则轮廓在行尾处关闭，并在下一行重新打开。如果可能，轮廓也将保持完全连接，从而形成非矩形形状。
大纲属性的使用
outline属性的最佳用途之一是突出显示搜索词。许多网站使用背景颜色执行此操作，但您也可以使用outline属性，而不必担心在页面上添加任何额外的间距。
outline-color属性接受术语“invert”，使轮廓颜色与当前背景相反。这使您可以突出显示动态网页上的元素，而无需知道使用的颜色。
您还可以使用outline属性删除活动链接周围的虚线。 CSS-Tricks的这篇文章展示了如何删除虚线轮廓。
