必须先设置outline-style才能生效，outline-color用于定义元素外轮廓颜色，常与outline-width、outline-style配合使用，或通过outline简写设置，如：outline: 2px solid red；支持颜色名称、十六进制、RGB/RGBA、HSL/HSLA等格式，示例：.example1 { outline-color: #00ff00; }；特殊值invert可反色显示但兼容性差，建议使用明确颜色值；常见于表单聚焦效果和可访问性增强，如input:focus { outline: 3px solid blue; }，button:focus { outline: 2px solid orange; outline-offset: 2px; }，核心是确保轮廓样式已定义。
要使用 CSS 的 outline-color 属性来控制元素的外轮廓颜色，你需要先确保该元素已经设置了 outline 样式。因为默认情况下，元素没有轮廓线，即使设置了颜色也不会显示。
基本语法
outline-color 用于设置元素外轮廓的颜色。它通常与 outline-style 和 outline-width 配合使用，也可以通过简写属性 outline 一次性设置。示例：
.element {
outline-style: solid;
outline-width: 2px;
outline-color: red;
}
或者使用简写形式：
.element {
outline: 2px solid red;
}
支持的颜色值类型
你可以为 outline-color 设置多种颜色格式，包括：
立即学习“前端免费学习笔记（深入）”；
- 颜色名称（如：red、blue、green）
- 十六进制颜色（如：#ff0000、#00f）
- RGB/RGBA 值（如：rgb(255, 0, 0)、rgba(255, 0, 0, 0.5)）
- HSL/HSLA 值（如：hsl(0, 100%, 50%)）
示例：
.example1 { outline-color: #00ff00; }
.example2 { outline-color: rgb(255, 165, 0); }
.example3 { outline-color: hsl(240, 100%, 50%); }
特殊值：invert
CSS 还支持一个特殊值 invert，它会让轮廓颜色与背景相反，以保证可见性。不过现代浏览器中对 invert 的支持有所变化，部分浏览器可能已不再支持或默认忽略。
.invert-outline {
outline-style: solid;
outline-color: invert; /* 尝试反色显示 */
}
建议在实际项目中优先使用明确的颜色值，避免依赖 invert。
常见应用场景
表单聚焦效果： 当输入框获得焦点时，用不同颜色的外轮廓提示用户。
input:focus {
outline: 3px solid blue;
outline-color: #007bff;
}
可访问性增强： 为键盘操作用户提供清晰的焦点指示。
button:focus {
outline: 2px solid orange;
outline-offset: 2px; /* 让轮廓稍微远离边框 */
}
基本上就这些。只要记得必须先定义 outline-style，否则颜色不会生效。不复杂但容易忽略。
