CSS中边框和轮廓属性的区别是什么?
如果没有区别，为什么同一事物有两种性质?
当前回答
tldr;
W3C将其解释为以下区别:
大纲不占用空间。 轮廓可以是非矩形的。
源
大纲应用于可访问性
还应该注意到大纲的主要目的是可访问性。将其设定为大纲:应该避免任何内容。
如果你必须删除它，它可能是一个更好的主意提供替代样式:
我看过很多关于如何使用outline:none或outline:0删除焦点指示器的技巧。请不要这样做，除非您将大纲替换为其他内容，以便于查看哪个元素具有键盘焦点。移除键盘焦点的视觉指示器会让那些依赖键盘导航的人在导航和使用你的网站时变得非常困难。
来源:“不要从链接和窗体控件中删除轮廓”，365 Berea Street
更多的资源
http://outlinenone.com/
其他回答
来自W3学校网站
CSS边框属性允许您指定元素边框的样式和颜色。
轮廓线是在元素周围(边界外)画的线，使元素“突出”。
大纲简写属性在一个声明中设置所有大纲属性。
可以设置的属性依次为:outline-color, outline-style, outline-width。
如果上面的一个值缺失，例如。"outline:solid #ff0000;"，如果有，将插入缺失属性的默认值。
点击这里查看更多信息: http://webdesign.about.com/od/advancedcss/a/outline_style.htm
同样值得注意的是，W3C的大纲是IE的边界，因为IE没有实现W3C的盒子模型。
在w3c box模型中，边框与元素的宽度和高度无关。在IE中，它是包容性的。
谷歌web.dev对盒子模型有一个很好的解释。
边框框围绕填充框，其空间由边框值占用。边界框是方框的边界，边界边缘是视觉上可以看到的范围。border属性用于可视化地为元素设置框架。
边距框，是你的方框周围的空间，由方框的边距规则定义。轮廓和框影等属性也占用了这个空间，因为它们被绘制在顶部，所以它们不会影响框的大小。你可以在我们的盒子上设置一个200px的轮廓宽度，包括边框在内的所有东西都将是完全相同的大小。
CSS中的outline属性在元素的外部画一条线。它和border很相似，只是:
它总是围绕所有的边，你不能指定具体的 它不是盒子模型的一部分，所以它不会影响 元素或相邻元素的位置
来源:https://css-tricks.com/almanac/properties/o/outline/
我做了一小段css/html代码，只是为了看看两者之间的区别。
Outline最好包含可能溢出的子元素，特别是在内联容器中。
Border更适合于块行为元素。
为您演奏，先生!
