CSS Outline

CSS 轮廓（outline）属性类似于 CSS 边框（border）属性。它允许你在元素周围绘制一个额外的边框，以引起视觉上的注意。

应用它的难度与应用边框一样简单。

请看这个例子

边框与轮廓的区别

乍一看，边框和轮廓看起来很相似，但它们之间存在一些非常重要的区别。

• 边框可以为元素的四个边应用不同的宽度、样式和颜色，而轮廓则不能。你只能为一个元素的四条边应用提供的值。
• 边框是元素尺寸的一部分，而轮廓不是元素尺寸的一部分。这意味着，无论你为元素应用多么厚的轮廓，它的尺寸都不会改变。

outline 属性是一个简写属性。它可以细分为 outline-width、outline-style 和 outline-color 属性。如果需要，它允许你单独使用其中任何一个属性。

请看这个例子

在上面的示例中，你可以看到三个轮廓属性。

Outline-width：它类似于 margin 和 padding。它可以是绝对值、相对值，或者是一个预定义的轮廓宽度值，即 thin（细）、medium（中）或 thick（粗）。建议使用绝对值或相对值，因为当使用 thin、medium 或 thick 等预定义轮廓宽度值时，不同浏览器会以不同方式解释。

Outline-color：它指定用于轮廓的颜色。它支持 HTML 和 CSS 中所有可用的颜色。

Outline-style：在上面的示例中，我们只使用了 solid（实线）轮廓样式，但还有很多轮廓样式，即 hidden（隐藏）、dotted（点状）、dashed（虚线）、solid（实线）、double（双线）、groove（凹槽）、ridge（脊形）、inset（内嵌）和 outset（外凸）。

让我们举个例子来演示不同轮廓样式的用法。

请看这个例子

轮廓偏移 (Outline offset)

轮廓偏移用于在轮廓和边框之间创建距离。

它接受一个 CSS 长度单位，并且边框和轮廓之间的空白区域将是透明的，然后它会显示父元素的背景颜色。因此，你可以看到轮廓和边框之间的明显区别。

让我们举个例子来看看轮廓和边框的区别。

请看这个例子