outline-color
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.
outline-color
CSS 属性 被用于设置一个元素轮廓的颜色。
尝试一下
语法
/* <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
可用以下这些值。
值
形式语法
示例
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;
}
Accessibility concerns
Custom 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.
规范
Specification |
---|
CSS Basic User Interface Module Level 4 # outline-color |
初始值 | auto |
---|---|
适用元素 | 所有元素 |
是否是继承属性 | 否 |
计算值 | For the keyword auto , the computed value is currentcolor . 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 |
浏览器兼容性
BCD tables only load in the browser