大纲和边界之间的区别
有人知道CSS中的“border”和“outline”属性有什么不同吗？ 如果没有区别，为什么同一事物有两个属性？
来自： http : //webdesign.about.com/od/advancedcss/a/outline_style.htm
CSS大纲属性是一个令人困惑的属性。 当你第一次了解它，很难理解它是如何远离边界财产。 W3C将其解释为具有以下不同之处：
1.外形不占空间。
2.Outlines可能是非矩形的。
除了其他答案外，大纲通常用于debugging。 Opera有一些不错的用户CSS样式，它们使用outline属性来显示所有元素在文档中的位置。
如果你想知道为什么一个元素没有出现在你期望的位置，或者你想要的大小，添加几个大纲，看看元素的位置。
如前所述，轮廓不占用空间。 在添加边框时，文档中元素的总宽度/高度会增加，但轮廓不会发生这种情况。 你也不能在边框等特定的边上设置轮廓; 这是全部或没有。
除了一些其他的答案…以下是我可以想到的一些更多的差异：
1）圆angular
border使用border-radius属性支持圆angular。 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>
tldr;
W3C将其解释为具有以下不同之处：
- 大纲不占用空间。
- 轮廓可能是非矩形的。
资源
大纲应该用于可访问性
还应该指出，大纲的主要目的是可访问性。 设置概要：不应该避免。
如果您必须删除它，那么提供其他样式可能是一个更好的主意：
我已经看到了很多有关如何通过使用outline：none或outline：0删除焦点指示符的提示。 请不要这样做，除非用其他的东西来replace轮廓，这样可以很容易地看出哪个元素具有键盘焦点。 移除键盘焦点的视觉指示符将使依赖键盘导航的人很难浏览和使用你的站点。
资料来源： “Berea街365号”不要删除链接和表格控件的大纲
更多资源
有一点老问题，但值得一提的是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; }
大纲的实际使用涉及透明度。 如果您有一个具有背景的父元素，但希望子元素的边框是透明的，以便父项的背景将显示出来，则必须使用“大纲”而不是“边框”。 虽然边界可以是透明的，但它会显示孩子的背景，而不是父母的背景。
换句话说，这个设置产生了如下效果：
outline: 7px solid rgba(255, 255, 255, 0.2);
来自W3学校网站
CSS边框属性允许您指定元素边框的样式和颜色。
轮廓是围绕元素（境外）绘制的线条，使元素“脱颖而出”。
大纲简写属性将所有大纲属性设置为一个声明。
可以设置的属性是（按顺序）：轮廓颜色，轮廓样式，轮廓宽度。
如果上面的值之一丢失，例如“outline：solid＃ff0000;”，缺less的属性的默认值将被插入，如果有的话。
点击这里查看更多信息： http : //webdesign.about.com/od/advancedcss/a/outline_style.htm
还值得注意的是，W3C的大纲是IE的边框 ，因为IE没有实现W3C盒子模型。
在w3c盒子模型中，边框不包括元素的宽度和高度。 在IE中是包容性的。
我已经做了一点的CSS / HTML代码只是为了看到两者之间的差异。
outline更好地包含潜在的溢出子元素，特别是内联容器。
border更适合于块状元素。
小提琴先生！
CSS中的outline属性在元素的外部绘制一条线。 除了以下内容外，它与边界类似：
- 它总是绕过所有的方面，你不能指定特定的
- 这不是盒子模型的一部分，所以它不会影响盒子模型
元素或相邻元素的位置
来源： https ： //css-tricks.com/almanac/properties/o/outline/
作为使用“轮廓”的一个实际例子，可以使用大纲属性来控制系统后面隐藏的虚线边框（例如，如果通过链接选项卡）（至less，我知道它可以在Firefox ，没有尝试过其他浏览器）。
一个常见的“图像replace”技术是使用，例如：
<div id="logo"><a href="/">Foo Widgets Ltd.</a></div>
在CSS中使用以下内容：
#logo { background: url(http://img.dovov.comlogo.png) center center no-repeat; } #logo a { display: block; text-indent: -1000em; }
问题是当焦点到达标签时，轮廓向左偏移1000em。 大纲可以让你closures这些元素的重点大纲。
我相信IE开发工具栏在高亮显示“select”模式下的检查元素时，也会使用类似于“引擎盖下”的轮廓。 这显示了“轮廓”不占空间的事实。
从W3Schools复制：
定义和用法
轮廓是围绕元素（境外）绘制的线条，使元素“脱颖而出”。
