同样值得注意的是，W3C的大纲是IE的边界，因为IE没有实现W3C的盒子模型。

在w3c box模型中，边框与元素的宽度和高度无关。在IE中，它是包容性的。

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

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

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

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

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

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

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

Border更适合于块行为元素。

为您演奏，先生!

边框与轮廓的区别:

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

演示:

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

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

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