CSS的outline和border属性有什么区别?

tldr;

W3C将其解释为以下区别:

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

源

大纲应用于可访问性

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

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

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

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

更多的资源

http://outlinenone.com/

摘自W3Schools:

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

Border是在元素内部创建的，而outline是在元素外部创建的。因此，border与元素的宽度和高度一起计算，而outline绘制在元素外部。

边框与轮廓的区别:

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

演示:

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