tldr;

W3C将其解释为以下区别:

大纲不占用空间。 轮廓可以是非矩形的。

源

大纲应用于可访问性

还应该注意到大纲的主要目的是可访问性。将其设定为大纲:应该避免任何内容。

如果你必须删除它，它可能是一个更好的主意提供替代样式:

我看过很多关于如何使用outline:none或outline:0删除焦点指示器的技巧。请不要这样做，除非您将大纲替换为其他内容，以便于查看哪个元素具有键盘焦点。移除键盘焦点的视觉指示器会让那些依赖键盘导航的人在导航和使用你的网站时变得非常困难。

来源:“不要从链接和窗体控件中删除轮廓”，365 Berea Street

更多的资源

http://outlinenone.com/

tldr;

W3C将其解释为以下区别:

大纲不占用空间。 轮廓可以是非矩形的。

源

大纲应用于可访问性

还应该注意到大纲的主要目的是可访问性。将其设定为大纲:应该避免任何内容。

如果你必须删除它，它可能是一个更好的主意提供替代样式:

我看过很多关于如何使用outline:none或outline:0删除焦点指示器的技巧。请不要这样做，除非您将大纲替换为其他内容，以便于查看哪个元素具有键盘焦点。移除键盘焦点的视觉指示器会让那些依赖键盘导航的人在导航和使用你的网站时变得非常困难。

来源:“不要从链接和窗体控件中删除轮廓”，365 Berea Street

更多的资源

http://outlinenone.com/

来自:http://webdesign.about.com/od/advancedcss/a/outline_style.htm

CSS outline属性是一个令人困惑的属性。当你第一次了解它时，你很难理解它与边境财产有什么不同。W3C将其解释为以下区别: 大纲不占用空间。 轮廓可以是非矩形的。

大纲的实际应用涉及透明度。如果你有一个带有背景的父元素，但是想让子元素的边框透明，这样父元素的背景就能显示出来，你必须使用“outline”而不是“border”。虽然边框可以是透明的，但它将显示子元素的背景，而不是父元素的背景。

换句话说，这种设置产生了以下效果:

outline: 7px solid rgba(255, 255, 255, 0.2);

边框与轮廓的区别:

Border是box模型的一部分，因此它与元素的大小相关。 Outline不是box模型的一部分，所以它不会影响附近的元素。

演示:

#{边境 边框:10px纯黑色; } #{轮廓 轮廓:10px纯黑色; } < html > <身体> <span id="border"> border </span>其他文本<br><br> <span id="outline"> outline </span>其他文本 < /身体> < / html > 其他的差异: 大纲显示在边框之外。 轮廓不能有圆角;边界。

除了其他答案，概要通常用于调试。Opera有一些很好的用户CSS样式，它们使用outline属性来显示文档中所有元素的位置。

如果您试图找出一个元素为什么没有出现在您期望的位置或没有出现在您期望的大小，添加一些轮廓并查看元素的位置。

正如前面提到的，轮廓不会占用空间。添加边框时，元素在文档中的总宽/高会增加，但outline不会发生这种情况。你也不能在特定的边设置轮廓，比如边界;要么全有，要么全无。