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

tldr;

W3C将其解释为以下区别:

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

源

大纲应用于可访问性

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

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

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

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

更多的资源

http://outlinenone.com/

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

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

作为一个使用“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开发者工具栏在“选择”模式下突出显示要检查的元素时，也使用了一些类似“隐藏”的东西。这很好地说明了“提纲”不占空间的事实。

边框与轮廓的区别:

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

演示:

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

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