outline-color
CSS property sets the color of an element's outline.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
/* <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;
outline-color
property is specified as any one of the values listed below.
<color>
<color>
.
invert
To ensure the outline is visible, performs a color inversion of the background. Note that browsers are not required to support this value; if they don't, this keyword is considered invalid.
An outline is a line that is drawn around an element, outside the
border
. Unlike the element's border, the outline is drawn outside the element's frame, and may overlap other content. The border, on the other hand, will actually alter the page's layout to ensure that it fits without overlapping anything else (unless you explicitly set it to overlap).
It is often more convenient to use the shorthand property
outline
when defining the appearance of an outline.
自定义
focus styles
commonly involve making adjustments to the
outline
property. If the color of the outline is adjusted, it is important to ensure that the contrast ratio between it and the background the outline is placed over is high enough that people experiencing low vision conditions will be able to perceive it.
Color contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG) , a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.
| 初始值 |
invert
, for browsers supporting it,
currentColor
for the other
|
|---|---|
| 适用于 | 所有元素 |
| 继承 | no |
| 计算值 |
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)
.
|
| 动画类型 | a color |
<color> | invertwhere
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<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;
}
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
outline-color
|
Chrome 完整支持 1 | Edge 完整支持 12 |
Firefox
完整支持
1.5
|
IE 完整支持 8 | Opera 完整支持 7 | Safari 完整支持 1.2 | WebView Android 完整支持 37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 14 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
invert
|
Chrome 不支持 No | Edge 不支持 12 — 79 | Firefox 不支持 1 — 3 | IE 完整支持 8 | Opera 不支持 7 — 15 | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持
要求使用供应商前缀或不同名称。
<color>
data type
color
,
background-color
,
border-color
,
text-decoration-color
,
text-emphasis-color
,
text-shadow
,
caret-color
，和
column-rule-color