Question

有人知道CSS中'border'和'outline'属性之间有什么区别吗？如果没有区别，那为什么同一件事有两个属性？

Answer 1

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

CSS outline属性是一个令人困惑的属性。当你第一次了解它时，很难理解它与边界属性的区别。 W3C将其解释为具有以下差异：

1.Outlines不占用空间。

2.Outlines可能是非矩形的。

Answer 2

除了其他一些答案之外......这里还有一些我能想到的差异：

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>

<强> FIDDLE

（注意：虽然 firefox 具有-moz-outline-radius属性，允许在大纲上使用圆角...此属性未在任何CSS标准中定义，并且其他浏览器不支持（source））

2）仅设置一侧的样式

border具有通过border-top:，border-left:等方式为每一方设置样式的属性。

大纲不能这样做。没有大纲 - 等等。这是全有或全无。（见this SO post）

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

注意：除Internet Explorer

外，所有主流浏览器都支持outline-offset

Answer 3

除了其他答案之外，通常还会使用轮廓进行调试。 Opera有一些不错的用户CSS样式，它们使用outline属性来显示文档中所有元素的位置。

如果您试图找出元素未出现在您预期的位置或预期大小的原因，请添加一些大纲并查看元素的位置。

如前所述，轮廓不占用空间。添加边框时，文档中元素的总宽度/高度会增加，但轮廓不会发生这种情况。此外，您无法在边界等特定边上设置轮廓;它是全有或全无。

Answer 4

tldr;

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

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

Source

大纲应该用于辅助功能

还应该注意，大纲的主要目的是可访问性。将其设置为概述：应该避免使用none。

如果你必须删除它，可能更好的想法提供替代样式：

我已经看到了很多关于如何使用outline：none或outline：0删除焦点指示的提示。请不要这样做，除非您用其他东西替换轮廓，以便于查看哪个元素具有键盘焦点。删除键盘焦点的可视指示器将使依赖键盘导航的人在导航和使用您的站点时非常困难。

来源："Do Not Remove the Outline from Link and Form Controls", 365 Berea Street

更多资源

http://outlinenone.com/

Answer 5

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

换句话说，此设置产生了以下效果：

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

enter image description here

Answer 6

来自W3学校网站

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

轮廓是围绕元素（边框外）绘制的线条，以使元素“脱颖而出”。

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

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

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

点击此处了解更多信息： http://webdesign.about.com/od/advancedcss/a/outline_style.htm

Answer 7

一个旧问题，但值得一提的是Firefox渲染错误（截至2013年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;
}

Answer 8

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

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

Answer 9

作为使用“轮廓”的一个实际例子，系统关注网页的微弱虚线边框（例如，如果你通过链接选项卡）可以使用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 Developer Toolbar在“选择”模式下突出显示要检查的元素时，也会使用“引擎盖下”的大纲。这很好地说明了“轮廓”不占空间的事实。

Answer 10

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

-(void)setValuesForGoogleDriveAccess { // Initialize the drive service & load existing credentials from the keychain if available self.driveService = [[GTLServiceDrive alloc] init]; self.driveService.authorizer = [GTMOAuth2ViewControllerTouch authForGoogleFromKeychainForName:kKeychainItemName clientID:kClientID clientSecret:nil]; self.driveService. NSLog(@"authorizer : %@", self.driveService.authorizer); parentIdList = [[NSMutableArray alloc]initWithCapacity:0]; }最好包含潜在的溢出子元素，尤其是内嵌容器。

outline更适合阻止 - 行为元素。

<强> Fiddle for you sir!

Answer 11

CSS中的outline属性在元素外部绘制一条线。除了：

之外，它类似于边界

它总是四面八方，你不能指定特定的
side它不是盒子模型的一部分，所以它不会影响
元素或相邻元素的位置

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

Answer 12

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

简而言之：
概述优点：
它不会弄乱间距和位置
缺点：
重叠的可能性很大

Answer 13

边框和轮廓之间的差异：

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

演示：

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

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

Answer 14

边框在元素内部创建，轮廓在元素外部创建。因此边框是与元素的宽度和高度一起计算的，而轮廓线则在元素外部绘制。

Answer 15

Google web.dev 对 Box Model 有很好的解释。

<块引用>

边框框围绕着填充框，其空间被边框值占据。边界框是您的框的边界，边界边缘是您可以直观看到的范围。边框属性用于可视化元素的边框。

<块引用>

边距框是框周围的空间，由框上的边距规则定义。诸如轮廓和框阴影之类的属性也占据了这个空间，因为它们被绘制在顶部，所以它们不会影响我们框的大小。您可以在我们的框上设置 200 像素的轮廓宽度，并且框内的所有内容以及包括边框框的大小都将完全相同。

Answer 16

从W3Schools复制：

定义和用法

轮廓线是绘制的线条   元素周围（边界外）   使元素“脱颖而出”。

轮廓和边界之间的差异

16 个答案: