CSS 轮廓和边框的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1158515/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between outline and border
提问by Kshitij Saxena -KJ-
Does anybody know of any difference between 'border' and 'outline' properties in CSS? If there is no difference, then why are there two properties for the same thing?
有人知道 CSS 中“边框”和“轮廓”属性之间有什么区别吗？如果没有区别，那么为什么同一事物有两个属性？
回答by Haim Evgi
From: http://webdesign.about.com/od/advancedcss/a/outline_style.htm
来自：http: //webdesign.about.com/od/advancedcss/a/outline_style.htm
The CSS outline property is a confusing property. When you first learn about it, it's hard to understand how it is even remotely different from the border property. The W3C explains it as having the following differences:
1.Outlines do not take up space.
2.Outlines may be non-rectangular.
CSS 大纲属性是一个令人困惑的属性。当您第一次了解它时，很难理解它与边框属性有何不同。W3C 将其解释为具有以下差异：
1.轮廓不占空间。
2.轮廓可能是非矩形的。
回答by Danield
In addition to some other answers... here are a few more differences I can think of:
除了其他一些答案......这里还有一些我能想到的差异：
1) Rounded corners
1) 圆角
bordersupports rounded corners with the border-radiusproperty. outlinedoesn't.
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>(NB: Although firefoxhas the -moz-outline-radiusproperty which allows rounded corners on outline... this property it is not defined in any CSS standard, and is not supported by other browsers (source))
（注意：虽然firefox具有-moz-outline-radius允许在轮廓上使用圆角的属性......该属性在任何 CSS 标准中都没有定义，并且不被其他浏览器支持（来源））
2) Styling one side only
2）仅设计一侧
border has properties to style each side with border-top:, border-left:etc.
边框有属性来设置每一边的样式border-top:，border-left:等等。
outline can't do this. There's no outline-top: etc. It's all or nothing. (see this SO post)
大纲不能这样做。没有大纲顶部：等等。要么全有，要么全无。（请参阅此 SO 帖子）
3) offset
3) 偏移
outline supports offset with the property outline-offset. border doesn't.
大纲支持使用属性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>Note: All major browsers support outline-offsetexcept Internet Explorer
注意：outline-offset除 Internet Explorer 外，所有主流浏览器均支持
回答by DisgruntledGoat
Further to other answers, outlines are usually used for debugging. Opera has some nice user CSS styles that use the outline property to show you where all the elements are in a document.
除了其他答案之外，大纲通常用于调试。Opera 有一些很好的用户 CSS 样式，它们使用大纲属性来显示所有元素在文档中的位置。
If you're trying to find out why an element isn't appearing where you expected or at the size you expected, add a few outlines and see where the elements are.
如果您想找出元素未出现在您预期的位置或未达到您预期大小的原因，请添加一些轮廓并查看元素的位置。
As already mentioned, outlines do not take up space. When you add a border, the element's total width/height in the document increases, but that doesn't happen with outline. Also you can't set outlines on specific sides like borders; it's all or nothing.
如前所述，大纲不占用空间。添加边框时，文档中元素的总宽度/高度会增加，但轮廓不会发生这种情况。你也不能在特定的边上设置轮廓，比如边框；要么全有要么全无。
回答by chrisjlee
tldr;
tldr;
The W3C explains it as having the following differences:
W3C 将其解释为具有以下差异：
- Outlines do not take up space.
- Outlines may be non-rectangular.
- 轮廓不占空间。
- 轮廓可以是非矩形的。
Outline should be used for accessibility
大纲应该用于可访问性
It should also be noted that outline's primary purpose is accessibility. Setting it to outline: none should be avoided.
还应该指出的是，大纲的主要目的是可访问性。将其设置为轮廓：不应该避免。
If you must remove it it maybe a better idea to provide alternative styling:
如果您必须删除它，提供替代样式可能是一个更好的主意：
I've seen quite a few tips on how to remove the focus indicator by using outline:none or outline:0. Please do not do this, unless you replace the outline with something else that makes it easy to see which element has keyboard focus. Removing the visual indicator of keyboard focus will give people who rely on keyboard navigation a really hard time navigating and using your site.
我已经看到了很多关于如何使用 outline:none 或 outline:0 删除焦点指示器的提示。请不要这样做，除非您将轮廓替换为易于查看哪个元素具有键盘焦点的其他内容。删除键盘焦点的视觉指示器将使依赖键盘导航的人很难导航和使用您的网站。
Source: "Do Not Remove the Outline from Link and Form Controls", 365 Berea Street
来源：“不要从链接和表单控件中删除大纲”，365 Berea Street
More Resources
更多资源
回答by Nate
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);
回答by pspahn
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.)
一个老问题，但值得一提的是 Firefox 渲染错误（截至 13 年 1 月仍然存在），其中即使子元素溢出其父元素（通过负边距、框阴影），轮廓也会呈现在所有子元素的外部， 等等。）
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;
}
回答by joe
From W3 School Site
来自 W3 学校网站
The CSS borderproperties allow you to specify the style and color of an element's border.
该CSS边框属性允许你指定元素边框的样式和颜色。
An outlineis a line that is drawn around elements (outside the borders) to make the element "stand out".
一个轮廓是绘制围绕单元（境外）的线路，使“鹤立鸡群”的元素。
The outline shorthand property sets all the outline properties in one declaration.
大纲简写属性在一个声明中设置所有大纲属性。
The properties that can be set, are (in order): outline-color, outline-style, outline-width.
可以设置的属性是（按顺序）：outline-color、outline-style、outline-width。
If one of the values above are missing, e.g. "outline:solid #ff0000;", the default value for the missing property will be inserted, if any.
如果缺少上述值之一，例如“outline:solid #ff0000;”，则将插入缺失属性的默认值（如果有）。
Check here for more information : http://webdesign.about.com/od/advancedcss/a/outline_style.htm
在这里查看更多信息：http: //webdesign.about.com/od/advancedcss/a/outline_style.htm
回答by Maxim Sloyko
It is also worth noting, that W3C's outlineis IE's border, since IE does not implement W3C box model.
还值得注意的是，W3C 的轮廓是 IE 的边框，因为 IE 没有实现 W3C 盒模型。
In w3c box model, the border is exclusive of element's width and height. In IE it is inclusive.
在 w3c 盒模型中，边框不包括元素的宽度和高度。在 IE 中它是包容性的。
回答by Matt Sach
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).
作为使用“大纲”的一个实际例子，可以使用大纲属性控制系统关注网页上的微弱虚线边框（例如，如果您浏览链接）（至少，我知道它可以在 Firefox 中，其他浏览器没试过）。
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:
在 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.
问题是当焦点到达标签时，轮廓向左移动 1000em。Outline 可以让您关闭此类元素的焦点轮廓。
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.
我相信 IE 开发人员工具栏在“选择”模式下突出显示要检查的元素时，也会使用类似于“引擎盖下”的轮廓。这很好地说明了“大纲”不占空间的事实。
回答by Alexandre Germain
I've made a little piece of css/html code just to see the difference between both.
我制作了一小段 css/html 代码只是为了看看两者之间的区别。
outlineis better to inclose potential overflowing child elements, especially into an inlinecontainer.
outline最好将潜在的溢出子元素封闭起来，尤其是内联容器。
borderis much more adapted for block-behaving elements.
border更适合块行为元素。
