tldr;

W3C将其解释为以下区别:

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

源

大纲应用于可访问性

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

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

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

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

更多的资源

http://outlinenone.com/

除了一些其他的答案之外……以下是我能想到的更多不同之处:

1)圆角

Border使用Border -radius属性支持圆角。大纲没有。

div { width: 150px; height: 150px; margin: 20px; display: inline-block; position: relative; } .border { border-radius: 75px; border: 2px solid green; } .outline { outline: 2px solid red; border-radius: 75px; -moz-outline-radius: 75px; outline-radius: 75px; } .border:after { content: "border supports rounded corners"; position: absolute; bottom: 0; transform: translateY(100%); } .outline:after { content: "outline doesn't support rounded corners"; position: absolute; bottom: 0; transform: translateY(100%); } <div class="border"></div> <div class="outline"></div>

小提琴

(注意:虽然firefox有-moz-outline-radius属性，允许在轮廓上使用圆角…此属性在任何CSS标准中都没有定义，其他浏览器也不支持(源代码))

2)只做一面造型

Border具有属性，可以用Border -top:、Border -left:等来设置每条边的样式。

大纲不能这样做。没有大纲等等。要么全有，要么全无。(见这篇SO帖子)

3)抵消

Outline支持使用Outline -offset属性的偏移量。边界不。

.outline { 保证金:100 px; 宽度:150 px; 身高:150 px; outline-offset: 20 px; 轮廓:2px实心红色; 边框:2px纯绿色; 背景:粉色; ｝ < div class = "大纲" > < / div >

小提琴

注意:除Internet Explorer外，所有主流浏览器都支持outline-offset

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

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

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

CSS中的outline属性在元素的外部画一条线。它和border很相似，只是:

它总是围绕所有的边，你不能指定具体的 它不是盒子模型的一部分，所以它不会影响 元素或相邻元素的位置

来源:https://css-tricks.com/almanac/properties/o/outline/

边框与轮廓的区别:

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

演示:

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

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.

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