摘自W3Schools:

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

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

作为一个使用“outline”的实际示例，系统后面模糊的虚线边界集中在一个网页上(例如。可以使用outline属性来控制(至少，我知道它可以在Firefox中，没有尝试过其他浏览器)。

一种常见的“图像替换”技术是使用，例如:

<div id="logo"><a href="/">Foo Widgets Ltd.</a></div>

在CSS中:

#logo
{
    background: url(/images/logo.png) center center no-repeat;
}
#logo a
{
    display: block;
    text-indent: -1000em;
}

问题是当焦点到达标签时，轮廓会向左偏移1000em。Outline可以让您关闭这些元素的焦点轮廓。

我相信IE开发者工具栏在“选择”模式下突出显示要检查的元素时，也使用了一些类似“隐藏”的东西。这很好地说明了“提纲”不占空间的事实。

谷歌web.dev对盒子模型有一个很好的解释。

边框框围绕填充框，其空间由边框值占用。边界框是方框的边界，边界边缘是视觉上可以看到的范围。border属性用于可视化地为元素设置框架。

边距框，是你的方框周围的空间，由方框的边距规则定义。轮廓和框影等属性也占用了这个空间，因为它们被绘制在顶部，所以它们不会影响框的大小。你可以在我们的盒子上设置一个200px的轮廓宽度，包括边框在内的所有东西都将是完全相同的大小。

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 > 其他的差异: 大纲显示在边框之外。 轮廓不能有圆角;边界。