轮廓颜色 | 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) | ? | ? | ? | ? |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
