CSS 轮廓

轮廓线是在元素的边界边缘之外绘制的线，例如按钮，活动表单字段等，以使它们突出。

轮廓 vs 边界

轮廓通常用于突出元素。一目了然的轮廓看起来与边框非常相似，但它在以下方面与边框不同：

• 轮廓不占用空间，因为它们总是放在元素框的顶部，这可能导致它们与页面上的其他元素重叠。
• 与边框不同，轮廓不允许我们将每条边设置为不同的宽度，或为每条边设置不同的颜色和样式。各方面的轮廓是相同的。
• 除了重叠之外，轮廓对周围元素没有任何影响。
• 与边框不同，轮廓不会更改元素的大小或位置。
• 轮廓可以是非矩形的。

注意： 如果在元素上添加轮廓，则会占用网页上相同的空间量，就好像你没有该元素的轮廓一样。

outline-width 属性

outline-width 属性指定要在元素上添加的轮廓的宽度。它的值应该是一个 CSS 长度（px ， pt ， em ，等）或允许的关键字之一，但百分比或负值是不允许的。就像 border-width 属性一样。

p {
    outline-width: thick;
}

注意： 如果 outline-width 缺少或未指定值， outline-width 则将使用将使用默认值（medium） 。

outline-style 属性

outline-style 属性设置样式轮廓，如： solid ， dotted 等等。

该属性可采取以下值之一： none ， hidden ， dashed ， dotted ， double ， groove ， inset ， outset ， ridge 和 solid 。就像 border-style 属性一样。

比如，

p {
    outline-style: double;
}

outline-color 属性

outline-color 属性设置轮廓的颜色。

p {
    outline-style: solid;
    outline-color: #0000ff;
}

你也可以设置 outline-color 为 transparent 。

**注意：**如果单独使用 outline-color 属性，则该属性不起作用。使用该 outline-style 属性首先设置轮廓。

outline 速记属性

outline CSS 属性是设置一个或多个单独的轮廓属性的速记属性。设置 outline-style ， outline-width 并 outline-color 在一个单一的规则中。

p {
    outline: 5px solid #9acd32;
}

如果在设置轮廓简写属性时省略或未指定单个轮廓属性的值，则将使用该属性的默认值（如果有）。

注意： 如果在设置 outline-color 元素的轮廓时缺少或未指定属性的值（例如 outline: 5px solid;），则元素的 color 属性将用作 outline-color 的值。

在下面的示例中，轮廓将是 5px 宽度的纯黑线：

但是，在这种情况下，省略该值将导致根本没有显示轮廓，因为属性的默认值是。 outline-style outline-style none

在下面的示例中，将没有轮廓：

p {
    color: black;
    outline: 5px solid;
}

警告： Internet Explorer 7 及更早版本不支持该 outline 属性。仅当指定了 <!DOCTYPE> 时，IE8 才支持该 outline 属性。

删除活动链接周围的虚线

outline 属性广泛用于删除活动链接周围的虚线。

a, a:acive, a:focus {
    outline: none; /* Works in Firefox, Chrome, IE8 and above */
}