大纲和边框之间的差异

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

CSS大纲属性是一个令人困惑的属性。当你第一次了解它的时候,很难理解它是如何与边界财产有着根本的不同。W3C将其解释为具有以下差异:

1.轮廓不占用空间。

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

(NB:虽然 火狐 有 -moz-outline-radius source )

2)仅一侧造型

边框的每一面都有要设置样式的属性 border-top: , border-left: 等。

大纲不能这样做。上面没有轮廓:等等,要么全部要么什么都没有。(见 this SO post )

3)偏移量

大纲支持用属性偏移 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

注意:所有主要浏览器都支持 outline-offset 除了Internet Explorer

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

如果你试图找出一个元素为什么没有出现在你期望的地方或者你期望的大小,添加一些轮廓,看看元素在哪里。

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

TLDR;

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

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

Source

大纲应用于可访问性

还应注意,大纲的主要目的是可访问性。将其设置为大纲:不应避免。

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

关于如何使用outline:none或outline:0删除焦点指示器,我已经看到了不少提示。请不要这样做,除非你用一些其他的东西替换大纲,这样可以很容易地看到哪个元素有键盘焦点。删除键盘焦点的视觉指示器将使依赖键盘导航的人在导航和使用您的网站时非常困难。

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

更多资源

• http://outlinenone.com/

大纲的实际使用涉及到透明度。如果父元素具有背景,但希望子元素的边框是透明的,以便父元素的背景可以显示出来,则必须使用“大纲”而不是“边框”。虽然边框可以是透明的,但它将显示子元素的背景,而不是父元素的背景。

换句话说,此设置创建了以下效果:

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

来自W3学校网站

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

安 概述 是围绕元素(边框外)绘制的线,以使元素“突出”。

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

可以设置的属性是(按顺序):大纲颜色、大纲样式、大纲宽度。

如果缺少上述值之一,例如“outline:solid ff0000;”,则将插入缺少属性的默认值(如果有)。

有关详细信息,请查看此处: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

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

值得注意的是,W3C的 概述 IE的 边境 ,因为IE不实现W3C Box模型。

在W3C框模型中,边界不包括元素的宽度和高度。在IE中是包容性的。

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

outline 最好将可能溢出的子元素包括在内,尤其是 内联的 容器。

border 更适合 块 -行为元素。

Fiddle for you sir!

CSS中的outline属性围绕元素的外部绘制一条线。它类似于边界,除了:

• 它总是绕着所有的边,你不能指定具体的
• 边它不是盒子模型的一部分,因此它不会影响
  元件或相邻元件的位置

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

作为使用“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。大纲允许您关闭这些元素的焦点大纲。

我相信IE开发者工具栏在“选择”模式下突出显示要检查的元素时,也使用了类似于“引擎盖下”的轮廓。这很好地说明了“轮廓”不占空间的事实。

把轮廓想象成一个边界,一个投影仪在某个物体外面画出来,作为一个边界,它是物体周围的一个实际物体。
投影很容易重叠,但边界不允许您通过。
有时我用 grid+%width ,border将更改视图端口的缩放比例,例如, width:100% 在父母中 width:100px 完全填充父级,但当我添加 border:solid 5px 要划分,它会使划分更小,以便为边界留出空间(尽管这很少见,而且可以解决!)
但是有了大纲,它就没有这个问题了,因为大纲更虚拟:d它只是元素外的一行。 但问题是,如果不正确地设置间距,它将与其他内容重叠。

简而言之:
提纲:
它不会干扰间距和位置
欺骗:
重叠几率高

从W3学校复制:

定义和用法

轮廓线是画出来的线 元素周围(边框外) 使元素“突出”。