在本教程中，我们将学习CSSoutline。

在上图中，灰色区域是内容突出显示为蓝色的轮廓。

outline

轮廓线是围绕元素边框绘制的线。
这用于突出显示元素。

注意！轮廓不是元素的一部分，绝不会影响元素的宽度和高度。

我们使用outline属性来设置元素的轮廓。

轮廓样式

我们为轮廓样式使用outline-style属性。

在设置与outline相关的其他属性之前，请务必先设置"轮廓样式"属性。
否则，它将不会显示。

可以为该属性分配以下值之一。

• none 没有-如果我们不想要轮廓
• hidden 隐藏-用于隐藏轮廓
• solid 实心-实线轮廓
• double双重-双重线轮廓
• dotted 点状线-点虚线轮廓
• dashed 虚线-虚线轮廓

轮廓样式属性的以下值将取决于轮廓颜色属性的值。

• groove
• inset
• outset
• ridge

在下面的示例中，我们将轮廓的样式设置为实体。

p {
	outline-style : solid;
}

在下面的示例中，我们将按钮的轮廓样式设置为none。

button {
	outline-style : none;
}

在下面的示例中，我们将按钮的轮廓样式设置为虚线。

button {
	outline-style : dashed;
}

轮廓宽度

我们使用outline-width属性来设置轮廓的宽度。

此属性的值可以是px，mm，cm等，也可以是预定义的薄，中和厚值。

在下面的示例中，我们将轮廓的宽度设置为2px。

p {
	outline-style : dashed;
	outline-width : 2px;
}

在下面的示例中，我们将轮廓的宽度设置为" thick"。

p {
	outline-style : dashed;
	outline-width : thick;
}

轮廓色

我们使用outline-color属性来设置轮廓的颜色。

可以通过以下方式设置此属性的值

• 颜色名称(如绿色)
• RGB值如rgb(100,100,100)
• 像#333这样的十六进制值

单击此处查看CSS Color教程。

单击此处查看混色器。

在下面的示例中，我们将轮廓的颜色设置为鲑鱼。

p {
	outline-style : dotted;
	outline-color : salmon;
}

outline-速记

我们可以通过简单地使用元素的outline属性来组合这三个outline属性。

我们按以下顺序组合属性。

• 轮廓宽度 outline-width
• 轮廓样式 outline-style
• 轮廓色 outline-color

在以下示例中，我们将轮廓宽度设置为2px，样式设置为虚线，颜色设置为大马哈鱼。

p {
	outline : 2px dashed salmon;
}