CSS 轮廓

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

轮廓 vs 边界

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

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

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

outline-width 属性

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

p {
    outline-width: thick;
}

注意: 如果 outline-width 缺少或未指定值, outline-width 则将使用将使用默认值(medium) 。

outline-style 属性

outline-style 属性设置样式轮廓,如: soliddotted 等等。

该属性可采取以下值之一: nonehiddendasheddotteddoublegrooveinsetoutsetridgesolid 。就像 border-style 属性一样。

none: Defines no outline.

hidden: Defines hidden outline.

dotted: Defines a dotted outline

dashed: Defines a dashed outline

solid: Defines a solid outline

double: Defines two outlines. The width of the two outlines are same as the outline-width value

groove: Defines a 3D grooved outline. The effect depends on the outline-color value

ridge: Defines a 3D ridged outline. The effect depends on the outline-color value

inset: Defines a 3D inset outline. The effect depends on the outline-color value

outset: Defines a 3D outset outline. The effect depends on the outline-color value

比如,

p {
    outline-style: double;
}

outline-color 属性

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

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

你也可以设置 outline-colortransparent

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

outline 速记属性

outline CSS 属性是设置一个或多个单独的轮廓属性的速记属性。设置 outline-styleoutline-widthoutline-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 */
}