轮廓和边框之间的区别

194

有人知道CSS中“边框”和“轮廓”属性之间的区别吗？如果没有区别，那么为什么同一事物有两个属性？

css

— Kshitij Saxena -KJ-
source

198

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

CSS outline属性是一个令人困惑的属性。当您第一次学习它时，很难理解它与border属性之间的区别。W3C将其解释为具有以下差异：

1.轮廓不占用空间。

2.轮廓线可能不是矩形的。

— 海姆·埃夫吉（Haim Evgi）
source

1

链接对此进行了解释。谢谢:)

— Kshitij Saxena -KJ- 09年

2

@Manu似乎在元素内部绘制了轮廓，而在元素外部显示了边框。

— Mahn

50

除了其他答案之外，我还能想到一些其他差异：

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>

展开摘要

小提琴

（注：尽管firefox具有-moz-outline-radius允许在轮廓上圆角的属性...此属性在任何CSS标准中均未定义，并且其他浏览器也不支持（源））

2）仅设计一侧

border具有一些属性border-top:，可使用border-left:等对每一侧进行样式设置。

大纲不能做到这一点。没有大纲顶部：等。全部或全部。（请参阅此SO帖子）

3）偏移

outline通过属性outline-offset支持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>

展开摘要

小提琴

注意：outline-offset除Internet Explorer之外，所有主要浏览器均支持

— 丹尼尔
source

是的，我明白了您的意思，我试图更改按钮的边框半径，但现在我的焦点轮廓并不能很好地环绕按钮。

— radtek

1

@Danield，虽然从技术上讲您说的每句话都是正确的，但问题的实质是不同的。当我们已经有边界时为什么要勾勒轮廓。答案是轮廓不在盒模型之内。

— 0fnt 2014年

2

@ user247077-我不同意。对于OP而言，轮廓和边框似乎相同。所以他想知道它们之间尽可能多的差异。其他一些差异已经发布在其他答案中，因此我决定添加尚未列出的其他差异。

— Danield 2014年

1

这是否意味着outlines渲染速度快于边框？

— Utkarsh Sinha 2014年

38

除其他答案外，大纲通常用于调试。Opera有一些不错的用户CSS样式，它们使用outline属性向您显示文档中所有元素的位置。

如果您试图找出为什么某个元素没有出现在您期望的位置或未达到期望的大小的原因，请添加一些轮廓，然后查看元素的位置。

如前所述，轮廓不会占用空间。添加边框时，元素在文档中的总宽度/高度会增加，但轮廓不会发生这种情况。同样，您不能在边框等特定侧面设置轮廓；全部或全无。

— 心怀不满的山羊
source

17

tldr;

W3C将其解释为具有以下差异：

轮廓不占用空间。
轮廓可能是非矩形的。

资源

大纲应用于辅助功能

还应注意，提纲的主要目的是可访问性。设置轮廓：不应避免。

如果必须将其删除，则最好提供其他样式：

我已经看到了很多有关如何通过使用outline：none或outline：0删除焦点指示器的提示。请不要执行此操作，除非您用其他方式替换了轮廓，以便于查看哪个元素具有键盘焦点。删除键盘焦点的视觉指示器将使依赖键盘导航的人们很难导航和使用您的网站。

来源：“不要从链接和表单控件中删除大纲”，Berea Street 365

更多资源

http://outlinenone.com/

— 克里斯蒂
source

8

大纲的实际使用涉及透明度。如果您有一个带有背景的父元素，但是希望子元素的边框是透明的以便父元素的背景可以显示出来，则必须使用“轮廓”而不是“边框”。虽然边框可以是透明的，但它会显示孩子的背景，而不是父母的背景。

换句话说，此设置具有以下效果：

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

在此处输入图片说明

— 内特
source

2

并非整个故事，如果添加background-clip: padding-box;样式，边框也会产生相同的效果。.:)

— Dennis98'9

4

从W3学校站点

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

一个轮廓是绘制围绕单元（境外）的线路，使“鹤立鸡群”的元素。

大纲速记属性在一个声明中设置所有大纲属性。

可以设置的属性是（按顺序）：轮廓颜色，轮廓样式，轮廓宽度。

如果缺少上述值之一，例如“ outline：solid＃ff0000;”，则将插入缺少属性的默认值（如果有）。

在此处查看更多信息：http : //webdesign.about.com/od/advancedcss/a/outline_style.htm

— 乔
source

4

有点老问题了，但值得一提的是Firefox渲染错误（自13年1月起仍然存在），即使所有子元素都溢出了父元素，边框也会在所有子元素的外部渲染（通过负边距，框阴影）等）

您可以使用以下方法解决此问题：

.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;
}

— sp
source

1

如果您尚未box-sizing尝试，请尝试一下！链接

— Brendan 2014年

此答案底部的示例未给出相同的结果。第一个是960 * 300的框，轮廓为3px，覆盖框外的所有内容。第二个给出的954 * 294框的轮廓为3px，不覆盖任何内容

— Peter R

3

值得注意的是，W3C的轮廓是IE的边界，因为IE没有实现W3C盒模型。

在w3c盒子模型中，边框不包括元素的宽度和高度。在IE中是包容性的。

— 马克西姆·斯洛科（Maxim Sloyko）
source

对于IE10，情况并非如此。-似乎您混合使用了框大小模型，并且轮廓线根本不占用空间，这与所选模型无关。

— 罗伯·西默

1

我做了一点CSS / HTML代码，只是为了看看两者之间的区别。

outline最好将潜在的溢出子元素封闭起来，尤其是将其封装到嵌入式容器中。

border更适合块行为元素。

先生，为您摆弄小提琴！

— 亚历山大·杰曼
source

1

CSS中的outline属性在元素的外部绘制一条线。它与border类似，除了：

它总是四面八方，您不能指定特定的
侧面不是盒子模型的一部分，因此不会影响
元素或相邻元素的位置

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

— Renganathan MG
source

1

作为使用“大纲”的实际示例，可以使用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。轮廓可以使您关闭此类元素上的焦点轮廓。

我相信IE开发人员工具栏在“选择”模式下突出显示要检查的元素时，也会使用诸如“引擎盖下”的轮廓。这很好地说明了“概述”不占用空间的事实。

— 马特·萨克
source

我想知道是谁发明了这种图像替换技术，为什么。它的唯一目的似乎是使文本对任何禁用了图像的人都消失了。带有适当的替代文字的正常图片有什么问题？

— 斯图尔特

这是Phark方法（由于您提到的原因，现在已经声名狼藉），它是Fahrner Image Replacement的改编。我只是将其用作演示为什么有人要修改焦点轮廓的实际应用的快速方法：）

— Matt Sach

1

将轮廓线视为投影机在某物外部绘制的边界，因为边界是该物周围的实际对象。
投影可以很容易地重叠，但是边界不允许您通过。
有时当我使用时grid+%width，border会改变视口的缩放比例，例如width:100%父级中的div width:100px完全填充了父级，但是当我添加border:solid 5pxdiv时，它会使div变小以留出边框空间（尽管这种情况很少见并且可以解决！），
但使用大纲则不会出现此问题，因为大纲是更虚拟的：D它只是元素外部的一条线，但问题是如果您不正确地进行间距，它将与其他内容重叠。

简而言之：
概述优点：
不影响间距和位置
缺点：
重叠的可能性很高

— 哈迪·巴兹米（Hadi Bazmi）
source

1

边框和轮廓之间的差异：

边框是盒子模型的一部分，因此它取决于元素的大小。轮廓不是盒子模型的一部分，因此它不会影响附近的元素。

演示：

#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>

展开摘要

其他区别：
轮廓显示在边框之外。
轮廓不能有圆角；边界可以。

— 匿名CSS程序员
source

-2

从W3Schools复制：

定义和用法

轮廓线是在元素周围（边框之外）绘制的线，以使元素“突出”。

— Usoban
source

这并不能说明2之间的区别，只是什么outline是

— 卡斯帕李