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

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

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

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

这是一个有点老的问题，但值得一提的是Firefox渲染错误(直到1月13日仍然存在)，即大纲将在所有子元素的外部渲染，即使它们溢出了父元素(通过负边距，框阴影等)。

你可以用以下方法解决这个问题:

.container {
    position: relative;
}
.container:before {
   content: '';
   margin: 0;
   padding: 0;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   outline: 1px solid #ff0000;
}

非常不幸的是，它仍然没有修复。在许多情况下，我更喜欢轮廓，因为它们不会增加元素的尺寸，从而使您在设置元素尺寸时不必总是考虑边界宽度。

毕竟，哪个更简单?

.container {
    width: 960px;
    height: 300px;
    outline: 3px solid black;
}

Or:

.container {
    width: 954px;
    height: 294px;
    border: 3px solid black;
}

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

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

Border更适合于块行为元素。

为您演奏，先生!

来自W3学校网站

CSS边框属性允许您指定元素边框的样式和颜色。

轮廓线是在元素周围(边界外)画的线，使元素“突出”。

大纲简写属性在一个声明中设置所有大纲属性。

可以设置的属性依次为:outline-color, outline-style, outline-width。

如果上面的一个值缺失，例如。"outline:solid #ff0000;"，如果有，将插入缺失属性的默认值。

点击这里查看更多信息: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

摘自W3Schools:

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