为什么需要在CSS中添加大纲？大纲是否与现有大纲重复？

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

轮廓在元素区域外创建边框，不会增加其宽度，也不会影响周围的布局。从：

轮廓实际上不是长方体的一部分，它与长方体的宽度或高度无关

这确实是一个非常有用的功能，因为它允许在悬停/聚焦动作中突出显示某个元素，而不会干扰相邻元素。Firefox中焦点链接周围的略带点的轮廓是使用outline属性完成的

但是，IE不支持它，所以它的日常用途有限

一个快速的谷歌，它会提到你可以用轮廓线消除锚上的虚线

另外，它是一个边框，不会占用元素的空间，也不会移动对象。可以用于调试。IE6/IE7中也不支持

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

---

它通常用来表示我所理解的焦点。如果您查看一些人的CSS重置，他们将执行以下操作：

*:focus { outline: none; }

---

如果你打开一个页面，开始按TAB键很多次，你就会看到锚定标签。除非样式表特别说明不可以，否则你应该会看到不同的链接应用了大纲。

Oh wow。我不敢相信，直到现在我还没有把丑陋的虚线轮廓和CSS属性联系起来！这非常有用。更重要的是，它首先用于添加边界。知道焦点在哪里是一件非常有用的事情。