为什么需要为CSS添加大纲？现有的概要是多余的吗？

Question

今天我注意到CSS中的outline属性。但是我不知道为什么它被添加到CSS？做什么的？ 对我来说，边距，填充，边框就足够了。

Answer 1

outline在元素区域外创建一个边框，不会增加其宽度而不会影响周围的布局。来自quirksmode.org page on outline：

  

轮廓实际上并不是盒子的一部分，它不会以任何方式计入盒子的宽度或高度。

这确实是一个非常有用的功能，因为它允许例如突出显示hover / focus行动中的元素，而不会打扰相邻元素。 Firefox中聚焦链接周围的略微虚线轮廓使用outline属性完成。

IE＆lt;不支持它但是，这只是日常用途有限。

• Quirksmode.org compatibility table

Answer 2

快速谷歌http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=outline+css会导致this article，提到您可以使用大纲来杀死锚点上的虚线边框。

要添加，它是一个不占用元素空间的边框，不会移动东西。可用于调试。 IE6 / IE7也不支持。

Answer 3

For this reason :)

注意图像周围的虚线边框：

用于删除它。

Answer 4

它通常用于表示我理解的焦点。如果你看一些人的CSS重置，他们会做这样的事情：

*:focus { outline: none; }

如果您只是打开一个页面并开始按TAB一次，您会看到不同的链接都应用了轮廓，除非样式表明确说明没有。