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