outline-color
outline-color CSS属性被用于设置一个元素轮廓的颜色.
示例
outline-color: red; outline-color: #32a1ce; outline-color: rgba(170, 50, 220, .6); outline-color: hsla(60, 90%, 50%, .8); outline-color: currentcolor;
大多时候使用outline
会更方便而不是outline-style
,outline-width
和outline-color
.元素轮廓是绘制于元素周围的一条线,位于border
的外围,使元素突出。不像border
,轮廓在元素的外绘制并且可能与其他元素重叠。而border
不会出现这种现象(除非故意).
/* color values */ outline-color: #f92525; outline-color: rgb(30,222,121); outline-color: blue; /* Keyword value */ outline-color: invert; /* Global values */ outline-color: inherit; outline-color: initial; outline-color: unset;
浏览器支持
![]() | ![]() | ![]() | ![]() | ![]() |
IE8以上版本的浏览器都支持outline-color |
语法:
outline-color :<color>| invert
取值:
- <color>:轮廓颜色,规则同
<color>
- invert:使用背景色的反色。,用于确认轮廓的显示。注意不是所有浏览器都支持该属性,若不则该属性无效.
默认值 | invert |
适用于 | 所有元素 |
继承性 | 无 |
动画性 | 当取值为<color>时 |
计算值 | invert;当指定为半透明时则对应一个rgba()计算值;如果非半透明值则对应一个rgb()计算值,transparent对应rgb(0,0,0,0) |
实例
<p>my outline is blue, as you can see.</p> p { outline: 2px solid; /* set the outline width and style */ outline-color: #0000ff; /* make the outline blue */ margin: 5px; }