think about outline as a border that a projector draw outside something as a border is an actual object around that thing. a projection can easily overlap but border don't let you pass. some times when i use grid+%width, border will change the scaling on view port,for example a div with width:100% in a parent with width:100px fills the parent completely, but when i add border:solid 5px to div it make the div smaller to make space for border(although it's rare and work-aroundable!) but with outline it doesn't have this problem as outline is more virtual :D it's just a line outside the element but the problem is if you don't do spacing properly it would overlap with other contents.

简而言之: 优点:轮廓 它不会打乱间距和位置 缺点: 重叠几率高

摘自W3Schools:

定义和用法 轮廓是画出来的一条线 在元素周围(边界之外) 让元素“脱颖而出”。

Border是在元素内部创建的，而outline是在元素外部创建的。因此，border与元素的宽度和高度一起计算，而outline绘制在元素外部。

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

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

我做了一小段css/html代码，只是为了看看两者之间的区别。

Outline最好包含可能溢出的子元素，特别是在内联容器中。

Border更适合于块行为元素。

为您演奏，先生!

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

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

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