CSS Outline(轮廓)

(outline)轮廓线是在元素（例如按钮，活动表单域等）的边框边缘外部绘制的一条线，以使其突出。轮廓通常用于突出显示元素。轮廓一眼看上去与边框非常相似，但在以下方面与边框有所不同：

注意： 如果将轮廓放在元素上，则它将在网页上占用相同的空间，就好像您对该元素没有轮廓一样。

outline-width 轮廓宽度属性

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

css 复制代码

p {
    outline-width: thick;
}

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

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

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

none: 没有定义轮廓。

hidden: 定义隐藏的轮廓。

dotted: 定义虚线轮廓

dashed: 定义虚线轮廓

solid: 定义一个坚实的轮廓

double:定义两个轮廓。两个轮廓的宽度与轮廓宽度值相同

groove:定义3D沟槽轮廓。效果取决于轮廓颜色值

ridge:定义3D脊形轮廓。效果取决于轮廓颜色值

inset:定义3D插入轮廓。效果取决于轮廓颜色值

outset:定义3D起始轮廓。效果取决于轮廓颜色值

css 复制代码

p {
    outline-style: double;
}

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

css 复制代码

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

您也可以将设置outline-color为transparent。

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

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

css 复制代码

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

如果在设置轮廓速记属性时忽略或未指定单个轮廓属性的值，outline则将使用该属性的默认值（如果有的话）。

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

在下面的示例中，轮廓将为宽度为5px的黑色实线：

css 复制代码

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

但是，在情况下outline-style，省略该值将不会显示任何轮廓，因为outline-styleproperty 的默认值为none。

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

css 复制代码

p {
    outline: 5px #00ff00;
}

警告： Internet Explorer 7和更早版本不支持该outline属性。IE8 outline仅在指定a的情况下才支持该属性。

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

css 复制代码

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