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

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

如果没有区别，为什么同一事物有两种性质?

101329 次浏览
小开

摘自W3Schools:

定义和用法

大纲是画出来的一条线 在元素周围(边界之外)

.

.

.
小开
最佳答案

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

CSS outline属性是一个令人困惑的属性。当你第一次了解它时，你很难理解它与边境财产有什么不同。W3C将其解释为以下区别:

  1. 大纲不占用空间。

  2. 轮廓可以是非矩形的。

小开

来自W3学校网站

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

大纲是在元素周围(边界外)画的一条线，使元素“突出”。

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

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

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

查看更多信息: http://webdesign.about.com/od/advancedcss/a/outline_style.htm < / p >

小开

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

小开

除了其他答案，概要通常用于调试。Opera有一些很好的用户CSS样式，它们使用outline属性来显示文档中所有元素的位置。

如果您试图找出一个元素为什么没有出现在您期望的位置或没有出现在您期望的大小，添加一些轮廓并查看元素的位置。

正如前面提到的，轮廓不会占用空间。添加边框时，元素在文档中的总宽/高会增加，但outline不会发生这种情况。你也不能在特定的边设置轮廓，比如边界;要么全有，要么全无。

小开

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

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

小开

tldr;

W3C将其解释为以下区别:

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

Source .

大纲应用于可访问性

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

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

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

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

更多的资源

小开

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

或者:

.container {
width: 954px;
height: 294px;
border: 3px solid black;
}
小开

除了一些其他的答案之外……以下是我能想到的更多不同之处:

1)圆角

border通过border-radius属性支持圆角。outline没有。

div {
width: 150px;
height: 150px;
margin: 20px;
display: inline-block;
position: relative;
}


.border {
border-radius: 75px;
border: 2px solid green;
}


.outline {
outline: 2px solid red;
border-radius: 75px;
-moz-outline-radius: 75px;
outline-radius: 75px;
}


.border:after {
content: "border supports rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);


}
.outline:after {
content: "outline doesn't support rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);
}
<div class="border"></div>


<div class="outline"></div>

提琴

(注意:虽然火狐有-moz-outline-radius属性，允许在轮廓上使用圆角…此属性在任何CSS标准中都没有定义，其他浏览器也不支持(源))

2)只做一面造型

border拥有属性，可以用border-top:、border-left:等来设置每条边的样式。

大纲不能这样做。没有大纲等等。要么全有，要么全无。(见这篇SO文章)

3)抵消

outline通过属性outline-offset支持偏移量。边界不。

.outline {
margin: 100px;
width: 150px;
height: 150px;
outline-offset: 20px;
outline: 2px solid red;
border: 2px solid green;
background: pink;
}
<div class="outline"></div>

FIDDLE

Note: All major browsers support outline-offset except Internet Explorer

小开

大纲的实际应用涉及透明度。如果你有一个带有背景的父元素，但是想让子元素的边框透明，这样父元素的背景就能显示出来，你必须使用“outline”而不是“border”。虽然边框可以是透明的，但它将显示子元素的背景，而不是父元素的背景。

换句话说，这种设置产生了以下效果:

outline: 7px solid rgba(255, 255, 255, 0.2);

enter image description here

小开

我做了一小段css/html代码，只是为了看看两者之间的区别。

outline最好包含可能溢出的子元素，特别是在内联容器中。

border更适合具有__abc1行为的元素。

为你演奏，先生!< / >

小开

CSS中的outline属性在元素的外部画一条线。它和border很相似，只是:

  • 它总是围绕所有的边，你不能指定具体的
    • 它不是盒子模型的一部分，所以它不会影响
    元素或相邻元素的位置

来源:https://css-tricks.com/almanac/properties/o/outline/

小开

把轮廓想象成投影仪在物体外面画的边界，边界是物体周围的一个实际物体 投影可以很容易地重叠，但边界不会让你通过 有时，当我使用grid+%width时，border会改变视图端口的缩放，例如，在父级中带有width:100%的div与width:100px完全填充父级，但当我添加border:solid 5px到div时，它会使div更小，以便为边框腾出空间(尽管这是罕见的，并且可以变通!)
但与outline相比，它不会有这个问题，因为outline更虚:D它只是元素外的一行 但问题是，如果你没有正确地设置间距，它就会与其他内容重叠

简写为
大纲优点:
它不会混淆空格和位置
缺点:

小开

边框与轮廓的区别:

Border是box模型的一部分，所以它计入元素的大小。 Outline不是box模型的一部分，所以它不会影响附近的元素

演示:

#border {
border: 10px solid black;
}
#outline {
outline: 10px solid black;
}
<html>
<body>
<span id="border">Border</span>Other text<br><br>
<span id="outline">Outline</span>Other text
</body>
</html>

其他差异:< br > 大纲显示在边框外 轮廓不能有圆角;边界。< / p >
小开

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

Demo

小开

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

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

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


提交答案