当前位置：文江博客话题详情

轮廓和边框 CSS 属性有什么区别？

发布于 2024-07-27 18:24:38 字数 98 浏览 5 评论 0原文

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

如果没有区别，那么为什么同一事物有两个属性呢？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

疯了 2024-08-03 18:24:38

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

CSS 轮廓属性是一个令人困惑的属性。当你第一次了解它时，很难理解它与 border 属性有何不同。 W3C 将其解释为具有以下差异：
轮廓不占用空间。
轮廓可以是非矩形的。

回复收藏 0 原文

知足的幸福 2024-08-03 18:24:38

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

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 标准中定义，并且不受其他浏览器支持（来源))

2) 样式化仅一侧

边框具有样式属性每边都有 border-top:、border-left: 等。

轮廓不能做到这一点。没有大纲顶部：等等。要么全有，要么全无。（参见这篇文章）

3）偏移

大纲支持使用属性轮廓偏移。边界没有。

.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 除外

In addition to some other answers... here are a few more differences I can think of:

1) Rounded corners

border supports rounded corners with the border-radius property. outline doesn't.

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: Although firefox has the -moz-outline-radius property which allows rounded corners on outline... this property it is not defined in any CSS standard, and is not supported by other browsers (source))

2) Styling one side only

border has properties to style each side with border-top:, border-left: etc.

outline can't do this. There's no outline-top: etc. It's all or nothing. (see this SO post)

3) offset

outline supports offset with the property outline-offset. border doesn't.

.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

回复收藏 0 原文

姐不稀罕 2024-08-03 18:24:38

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

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

正如已经提到的，轮廓不占用空间。添加边框时，文档中元素的总宽度/高度会增加，但轮廓不会发生这种情况。此外，您无法在特定侧面（例如边框）设置轮廓；要么全有，要么全无。

回复收藏 0 原文

挽袖吟 2024-08-03 18:24:38

太棒了；

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

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

来源

应使用大纲以实现可访问性

还应注意，大纲的主要内容目的是可访问性。将其设置为轮廓：不应避免。

如果您必须删除它，那么提供替代样式可能是更好的主意：

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

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

更多资源

http://outlinenone.com/

回复收藏 0 原文

回忆那么伤 2024-08-03 18:24:38

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

换句话说，此设置创建了以下效果：

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

在此处输入图像描述

A practical use of outline deals with transparency. If you have a parent element with a background, but want a child element's border to be transparent so that the parent's background will show through, you must use "outline" rather than "border." While a border can be transparent, it will show the child's background, not the parent's.

In other words, this setting created the following effect:

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

enter image description here

回复收藏 0 原文

芸娘子的小脾气 2024-08-03 18:24:38

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

回复收藏 0 原文

￠蛋碎的人ぎ生 2024-08-03 18:24:38

来自 W3 School 网站

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

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

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

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

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

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

回复收藏 0 原文

待天淡蓝洁白时 2024-08-03 18:24:38

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

A little bit of an old question, but worth mentioning a Firefox rendering bug (still present as of Jan '13) where the outline will render on the outside of all child elements even if they overflow their parent (through negative margins, box-shadows, etc.)

You can fix this with:

.container {
    position: relative;
}
.container:before {
   content: '';
   margin: 0;
   padding: 0;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   outline: 1px solid #ff0000;
}

Super unfortunate that it's still not fixed. I much prefer outlines in many cases since they do not add to the dimensions of an element, saving you from always having to consider border widths when setting dimensions of an element.

After all, which is simpler?

.container {
    width: 960px;
    height: 300px;
    outline: 3px solid black;
}

Or:

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

回复收藏 0 原文

眉目亦如画i 2024-08-03 18:24:38

还值得注意的是，W3C 的轮廓就是IE 的边框，因为IE 不实现W3C 盒子模型。

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

回复收藏 0 原文

浮云落日 2024-08-03 18:24:38

边框和轮廓之间的差异：

边框是盒模型的一部分，因此它会根据元素的大小进行计算。
轮廓不是盒模型的一部分，因此它不会影响附近的元素。

演示：

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

Other differences:
The outline is displayed outside the border.
Outlines cannot have rounded corners; borders can.

Differences between border and outline:

Border is part of the box model so it counts against the element's size.
Outline is not part of the box model so it doesn't affect nearby elements.

Demo:

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

Other differences:
The outline is displayed outside the border.
Outlines cannot have rounded corners; borders can.

回复收藏 0 原文

总攻大人 2024-08-03 18:24:38

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

outline 最好将潜在溢出的子元素包含在内，尤其是放入 inline 容器中。

border 更适合块行为的元素。

为您小提琴，先生！

回复收藏 0 原文

不弃不离 2024-08-03 18:24:38

CSS 中的outline 属性在元素外部绘制一条线。它与 border 类似，不同之处在于：

它总是围绕所有边，您无法指定特定
边它不是盒子模型的一部分，因此不会影响
元素或相邻元素的位置

来源：https://css-tricks.com/almanac /属性/o/大纲/

回复收藏 0 原文

潜移默化 2024-08-03 18:24:38

作为使用“大纲”的一个实际示例，可以使用大纲属性来控制网页上的系统焦点后面的微弱点状边框（例如，如果您通过选项卡浏览链接）（至少，我知道它可以在 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 开发人员工具栏也在“幕后”使用类似轮廓的东西。这很好地说明了“轮廓”不占空间的事实。

As a practical example of using "outline", the faint dotted border that follows the system focus on a webpage (eg. if you tab through the the links) can be controlled using the outline property (at least, I know it can in Firefox, not tried other browsers).

A common "image replacement" technique is to use, for example:

<div id="logo"><a href="/">Foo Widgets Ltd.</a></div>

with the following in the CSS:

#logo
{
    background: url(/images/logo.png) center center no-repeat;
}
#logo a
{
    display: block;
    text-indent: -1000em;
}

The problem being that when the focus reaches the tag, the outline heads off 1000em to the left. Outline can allow you to turn off the focus outline on such elements.

I believe that the IE Developer Toolbar is also using something like outline "under the hood" when highlighting elements for inspection in "select" mode. That shows well the fact that "outline" takes up no space.

回复收藏 0 原文

梦里寻她 2024-08-03 18:24:38

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

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