轮廓颜色 | outline-color

outline-color

outline-colorCSS属性设置元素的轮廓的颜色。一个轮廓线是围绕着一个元素在border外面画的线。

outline定义轮廓的外观时使用简写属性通常更为方便。

/* Keyword values */
outline-color: invert;
outline-color: red;

/* Global values */
outline-color: inherit;
outline-color: initial;
outline-color: unset;

初始值	invert, for browsers supporting it, currentColor for the other
适用元素	all elements
是否是继承属性	no
适用媒体	visual, interactive
计算值	For the keyword invert, the computed value is invert. For the color value, if the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
Animation type	a color
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

该outline-color属性被指定为下面列出的任何一个值。

值

<color>轮廓的颜色被指定为<color>。invert为了确保轮廓可见，执行背景的颜色反转。请注意，浏览器不需要支持这个值，在这种情况下，它是无效的。

正式语法

<color> | invertwhere 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

示例

HTML

<p>My outline is blue, as you can see.</p>

CSS

p {
  outline: 2px solid;      /* Set the outline width and style */
  outline-color: #0000FF;  /* Make the outline blue */
  margin: 5px;
}

规范

Specification	Status	Comment
CSS Basic User Interface Module Level 3The definition of 'outline-color' in that specification.	Candidate Recommendation	No change.
CSS TransitionsThe definition of 'outline-color' in that specification.	Working Draft	Defines outline-color as animatable.
CSS Level 2 (Revision 1)The definition of 'outline-color' in that specification.	Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	(Yes)	1.5 (1.8) 1	8.0	7.0	1.2 (125)
invert value	No support	?	No support 2	8.0	No support 3	No support

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	?	?	?	?