outline-color

/* <color> values */
outline-color: #f92525;
outline-color: rgb(30 222 121);
outline-color: blue;

/* Global values */
outline-color: inherit;
outline-color: initial;
outline-color: revert;
outline-color: revert-layer;
outline-color: unset;

outline-color 属性指定为以下列出的值之一。

<color>

轮廓的颜色，指定为 <color>。

规范还列出了一个额外的值 auto，它目前在任何浏览器中都不受支持。实施后，auto 将计算为 currentcolor，除非 outline-style 设置为 auto，然后它将计算为 accent color。

轮廓是在元素周围绘制的一条线，位于 border 外部。与元素的边框不同，轮廓绘制在元素框架的外部，并且可能会与其他内容重叠。另一方面，边框实际上会改变页面的布局，以确保它适合且不会与任何其他内容重叠（除非你明确地将其设置为重叠）。

在定义轮廓的外观时，使用简写属性 outline 通常更方便。

自定义 focus styles 通常会涉及对 outline 属性进行调整。如果调整了轮廓的颜色，请务必确保它与轮廓所放置的背景之间的对比度足够高，以便低视力的人能够感知到它。

颜色对比度是通过比较文本和背景颜色值的亮度来确定的。为了满足当前的 Web 内容无障碍指南 (WCAG)，文本内容的对比度要求为 4.5:1，标题等较大的文本则要求为 3:1。较大的文本定义为 18.66px 和 粗体 或更大，或 24px 或更大。

• WebAIM: 颜色对比度检查器
• MDN 了解 WCAG，指南 1.4 说明
• 了解成功准则 1.4.3 | W3C 了解 WCAG 2.0

outline-color = 
  auto                      |
  [ <color> | <image-1D> ]  

<image-1D> = 
  <stripes()>  

<stripes()> = 
  stripes( <color-stripe># )  

<color-stripe> = 
  <color>                            &&
  [ <length-percentage> | <flex> ]?  

<length-percentage> = 
  <length>      |
  <percentage>  

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;
}

Result

• outline
• outline-width
• outline-style
• <color> 数据类型
• 其他与颜色相关的属性：color、background-color、border-color、text-decoration-color、text-emphasis-color、text-shadow、caret-color 和 column-rule-color