DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费积分！
outline-color CSS 属性指定元素外边框的颜色。什么是外边框？外边框是在元素周围绘制的一条线——位于边框边缘之外——当元素获得焦点时，用于辅助功能或装饰目的。
button {
outline-color: #e435;
}outline-color 是 outline 简写属性中的一个组成部分，并在 CSS 基本用户界面模块级别 4 规范中定义，该规范目前处于编辑草案状态。
用法
我们通常使用简写属性设置元素的外边框
a:focus {
outline: 0.1em solid darkgray;
}语法
outline-color: <color>| invert- 初始值：
invert（如果invert不受支持，则为currentColor） - 应用于：所有元素
- 继承：否
- 计算值：对于关键字
invert，计算值为invert。对于颜色值，如果值为半透明，则计算值为相应的rgba()。如果不是，则为相应的rgb()。transparent 关键字映射到rgba(0,0,0,0)。 - 动画类型：离散
值
/* Keyword value */
outline-color: invert;
/* <color> values */
outline-color: #333;
outline-color: darkorange;
outline-color: hsl(210,100%,44%);
/* Global values */
outline-width: initial;
outline-width: inherit;
outline-width: unset;<color>：定义外边框的颜色，并接受<rgb()>、<rgba()>、<hsl()>、<hsla()>、<hex-color>、<named-color>、currentcolor和<deprecated-system-color>invert：默认值。指定渲染外边框位置的背景颜色的反色值，因此它确保外边框可见。initial：应用属性的默认设置，即invert。inherit：采用父元素的outline-color值。unset：从元素中移除当前的outline-color。
根据规范，如果浏览器不支持 invert 值，则 outline-color 属性的初始值为 currentColor 关键字，但在撰写本文时，invert 在所有现代浏览器中都被认为是无效的。您可以在 caniuse 上查看浏览器支持情况。
示例
以下示例在按钮获得焦点后将其外边框颜色设置为红色
button {
outline-width: 1px;
outline-style: solid;
outline-color: gray;
}
button:focus {
outline-color: red;
} 辅助功能
外边框通常用于指示元素的焦点，这对于非鼠标交互（出于辅助功能原因）很有用，并且通常可以使所有用户受益。
您很可能希望更改外边框颜色以匹配您的品牌或使其更醒目。这时 outline-color 就派上用场了。但请确保您的自定义颜色符合 WCAG 的要求，尤其是 成功标准 2.4.7，其中详细介绍了可见焦点状态。
我们不仅需要确保外边框颜色与其所在背景之间的对比度足够高以确保清晰可见，而且在没有外边框与元素之间没有空间的情况下——我们需要检查外边框颜色与元素本身背景之间的对比度。
根据 WCAG 成功标准 1.4.3，非文本 UI 控件（如按钮）必须与相邻颜色具有至少 3:1 的颜色对比度。
Sara Soueidan 在她的 “设计可访问且符合 WCAG 标准的焦点指示器的指南” 文章中对此进行了很好的解释。您可以在 Stacy Arellano 的深入文章 中了解有关 WCAG 对比度比率及其确定方式的更多信息。
演示
在以下演示中使用轮廓属性
浏览器支持
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 8+ | 全部 | 全部 | 全部 | 全部 | 全部 |
| Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| 全部 | 全部 | 92+ | 全部 | 64+ |
