Outline 与 Border 属性的区别
CSS outline 属性是一个容易混淆的属性。当您第一次了解它时，很难理解它与 border 属性有何不同。W3C 解释说它有以下不同之处:
Outlines 不占空间
Outlines 可以是非矩形的。
Outlines 不占空间
这句话本身就令人困惑。Web 页面上的对象如何不占用 Web 页面上的空间？但是，如果你将 Web 页面看作是一个洋葱，那么页面上的每一项都可能位于另一项之上。outline 属性不占用空间，因为它总是放在元素框的顶部。
当一个 outline 被放置在一个元素周围时，它对该元素在页面上的布局没有任何影响。它不会改变元素的大小或位置。如果在一个元素上放一个 outline，它将占用与没有该元素大纲相同的空间。这并不适用于 border。元素的 border 添加到元素的外部宽度和高度。因此，如果您有一个 50px 宽的图像，有一个 2px 的 border，那么它将占用 54px (每个边边框占用 2px)。同样的 2px outline 的图像在页面上只占 50px 的宽度，outline 会显示在图像的外边缘。
Outlines 可以是非矩形的。
在你开始思考 “酷，现在我可以画圆圈了” 之前，再想想。这句话的意思可能和你想的不一样。当您在元素上放置 border 时，浏览器会将该元素解释为一个巨大的矩形框。如果框被分割成几行，浏览器只会保留边缘打开，因为框没有关闭。这就好像浏览器看到的边界是一个无限宽的屏幕 —— 宽到足以使边界成为一个连续的矩形。
相反，outline 属性考虑了边缘。如果一个拥有 outline 属性的元素跨越几行，outline 会在行的末尾关闭，在下一行重新打开。如果可能，outline 也将保持完全连接，创建一个非矩形形状。
Outline 属性的使用
outline 属性的最佳用途之一是突出显示搜索项。许多站点使用背景色来实现这一点，但是你也可以使用 outline 属性，而不用担心在页面上添加任何额外的间距。outline-color 属性接受 "invert" 属性，它使 outline 颜色与当前背景颜色相反。这允许您在不需要知道使用什么颜色的情况下突出显示动态 Web 页面上的元素。
还可以使用 outline 属性删除被激活链接周围的虚线。这篇来自 CSS-Tricks 的文章展示了如何删除虚线。
Last updated