教你玩转CSS 轮廓(outline)属性

  • A+
所属分类:Web前端
摘要

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


CSS 轮廓(outline)

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

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

 

定义和用法

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

注释:轮廓线不会占据空间,也不一定是矩形。

outline 简写属性在一个声明中设置所有的轮廓属性。

可以按顺序设置如下属性:

  • outline-color
  • outline-style
  • outline-width

如果不设置其中的某个值,也不会出问题,比如 outline:solid #ff0000; 也是允许的。

 

教你玩转CSS 轮廓(outline)属性

 

 

所有CSS 轮廓(outline)属性

“CSS” 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2)。

教你玩转CSS 轮廓(outline)属性

属性 说明 css
outline 在一个声明中设置所有的轮廓属性

outline-color

outline-style

outline-width

inherit

2
outline-color 设置轮廓的颜色

color-name

hex-number

rgb-number

invert

inherit

2
outline-style 设置轮廓的样式

nore

dotted

dashed

solid

double

groove

ridge

inset

outset

inherit

2
outline-width 设置轮廓的宽度

thin

medium

thick

length

inherit

2