CSS 外轮廓

外轮廓是在元素边框之外绘制的一条线。

该元素有一个黑色边框和一个宽度为 10px 的绿色外轮廓。

亲自试一试 »

CSS 外轮廓

外轮廓是在元素周围、边框之外绘制的一条线，以使元素"stand out"。

CSS 具有以下外轮廓属性：

outline-style
outline-color
outline-width
outline-offset
outline

笔记：外轮廓不同于边框！与边框不同，轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。此外，轮廓不是元素尺寸的一部分；它是元素尺寸的一部分。元素的总宽度和高度不受轮廓宽度的影响。

CSS 轮廓样式

这个outline-style属性指定轮廓的样式，可以具有以下值之一：

dotted- 定义虚线轮廓
dashed- 定义虚线轮廓
solid- 定义一个坚实的轮廓
double- 定义双轮廓
groove- 定义 3D 凹槽轮廓
ridge- 定义 3D 脊状轮廓
inset- 定义 3D 插图轮廓
outset- 定义 3D 起始轮廓
none- 没有定义轮廓
hidden- 定义隐藏轮廓

下面的例子展示了不同的outline-style值：

示例

不同轮廓样式的演示：

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

结果：

A dotted outline.

A dashed outline.

A solid outline.

A double outline.

A groove outline. The effect depends on the outline-color value.

A ridge outline. The effect depends on the outline-color value.

An inset outline. The effect depends on the outline-color value.

An outset outline. The effect depends on the outline-color value.

亲自试一试 »

笔记：其他任何外轮廓属性（您将在下一章中了解更多）都不会产生任何效果，除非outline-style属性已设置！