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