来自W3学校网站

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

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

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

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

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

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

边框与轮廓的区别:

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

演示:

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

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

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

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.

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

tldr;

W3C将其解释为以下区别:

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

源

大纲应用于可访问性

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

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

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

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

更多的资源

http://outlinenone.com/

这是一个有点老的问题，但值得一提的是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;
}