轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。CSS outline 属性规定元素轮廓的样式、颜色和宽度。
outline属性
轮廓线不会占据空间,也不一定是矩形。
outline
简写属性在一个声明中设置所有的轮廓属性。
可以按顺序设置如下属性:
outline-color
outline-style
outline-width
如果不设置其中的某个值,也不会出问题,比如 outline:solid #ff0000
; 也是允许的。
可能的值
值 | 描述 |
---|---|
outline-color | 规定边框的颜色。 |
outline-style | 规定边框的样式。 |
outline-width | 规定边框的宽度。 |
outline-color属性
请始终在 outline-color
属性之前声明 outline-style
属性。元素只有获得轮廓以后才能改变其轮廓的颜色。
outline-color
属性设置一个元素整个轮廓中可见部分的颜色。要记住,轮廓的样式不能是 none
,否则轮廓不会出现。
可能的值
值 | 描述 |
---|---|
color_name | 规定颜色值为颜色名称的轮廓颜色(比如 red)。 |
hex_number | 规定颜色值为十六进制值的轮廓颜色(比如 #ff0000)。 |
rgb_number | 规定颜色值为 rgb 代码的轮廓颜色(比如 rgb(255,0,0))。 |
invert | 默认。执行颜色反转(逆向的颜色)。可使轮廓在不同的背景颜色中都是可见。 |
inherit | 规定应该从父元素继承轮廓颜色的设置。 |
outline-style 属性
outline-style
属性用于设置元素的整个轮廓的样式。样式不能是 none
,否则轮廓不会出现。
可能的值
值 | 描述 |
---|---|
none | 默认。定义无轮廓。 |
dotted | 定义点状的轮廓。 |
dashed | 定义虚线轮廓。 |
solid | 定义实线轮廓。 |
double | 定义双线轮廓。双线的宽度等同于 outline-width 的值。 |
groove | 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。 |
ridge | 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。 |
inset | 定义 3D 凹边轮廓。此效果取决于 outline-color 值。 |
outset | 定义 3D 凸边轮廓。此效果取决于 outline-color 值。 |
inherit | 规定应该从父元素继承轮廓样式的设置。 |
outline-width 属性
outline-width
属性设置元素整个轮廓的宽度,只有当轮廓样式不是 none
时,这个宽度才会起作用。如果样式为 none
,宽度实际上会重置为 0
。不允许设置负长度值。
请始终在 outline-width
属性之前声明 outline-style
属性。元素只有获得轮廓以后才能改变其轮廓的颜色。
可能的值
值 | 描述 |
---|---|
thin | 规定细轮廓。 |
medium | 默认。规定中等的轮廓。 |
thick | 规定粗的轮廓。 |
length | 允许您规定轮廓粗细的值。 |
inherit | 规定应该从父元素继承轮廓宽度的设置。 |