W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

CSS 轮廓(Outline)


CSS Outline 属性

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

CSS outline 属性指定样式,颜色和轮廓宽度。

这个元素有一层很薄的黑色边框和一双10px宽并且颜色为绿色的轮廓。


CSS轮廓

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。


轮廓样式

outline-style 属性指定轮廓的风格。

outline-style 属性可以是下列值之一:

  • dotted - 定义点轮廓
  • dashed - 定义虚线轮廓
  • solid - 定义一个实体轮廓
  • double - 定义双轮廓
  • groove - 定义一个3D槽轮廓。效果取决于轮廓颜色值
  • ridge - 定义一个3D脊轮廓。效果取决于轮廓颜色值
  • inset - 定义一个3D插图轮廓。效果取决于轮廓颜色值
  • outset - 定义3D外部轮廓。效果取决于轮廓颜色值/li>
  • none - 定义没有轮廓
  • hidden - 定义一个隐藏的轮廓

下面的实例首先在每个 <p> 元素周围设置一个黑色边框,然后显示不同的 outline-style 值:

Example

p {
    border: 1px solid black;
    outline-color: red;
}

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;}

Result:

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-color 属性用于设置轮廓的颜色。

颜色可以按以下取值:

  • 颜色名称 - 指定一个颜色名称,如“红色”
  • RGB - 指定一个RGB值,如“RGB(255,0,0)”
  • 16进制值 - 指定一个十六进制值,如“# FF0000”
  • 颜色反转 - 执行颜色反转(确保轮廓可见,不论颜色背景)

Example

p {
    border: 1px solid black;
    outline-style: double;
    outline-color: red;
}

Result:

A colored outline.

尝试一下 »

轮廓宽度

outline-width 属性用于设置轮廓的宽度。

宽度可以设定成一个固定大小(px,pt,cm,em,等等) 或者使用三种预定义值: thin,medium,或 thick。

Example

p {border: 1px solid black;}

p.one {
    outline-style: double;
    outline-color: red;
    outline-width: thick;
}

p.two {
    outline-style: double;
    outline-color: green;
    outline-width: 3px;
}

Result:

A thick outline.

A thinner outline.

尝试一下 »

轮廓 - 简写属性

要想缩短代码,也可以在一个属性中指定所有单独的轮廓属性。

outline 属性是以下单独属性的简写:

  • outline-width
  • outline-style (必须)
  • outline-color

Example

p {
    border: 1px solid black;
    outline: 5px dotted red;
}

Result:

An outline.

尝试一下 »

CSS轮廓属性

属性 描述
outline 在一个声明中设置所有的外边框属性
outline-color 设置外边框的颜色
outline-offset 指定元素的轮廓和边或边框之间的空间
outline-style 设置外边框的样式
outline-width 设置外边框的宽度