CSS outline-color 属性

CSS outline-color 语法

在 CSS 中，outline-color 属性用于单独定义轮廓线的颜色。outline-color 一般搭配以下 2 个属性一起使用。

语法：

outline-color: 颜色值;

说明：

outline-color 属性的取值是一个颜色值，主要是以下几种情况（常用的是前 4 种）。

关键字，比如 red、orange、skyblue 等。
十六进制值，比如 #F1F1F1。
RGB 值，比如 rgb(255, 255, 255)。
RGBA 值，比如 rgba(255, 255, 255, 1.0)。
HSL 值，比如 hsl(60deg 75% 45%)。
HSLA 值，比如 hsla(60deg 75% 45% / 60%)。
HWB 值，比如 hwb(120deg 0% 50% / 75%)。

对于 outline-color 属性，我们要清楚以下几点。

outline-color 属性适用于所有元素。
outline-color 只有在 outline-style 不为 none 时才会生效。如果 outline-style 是 none，那么轮廓将不可见，无论你设置了什么颜色。
outline 是 outline-color、outline-style、outline-width 的简写属性，更常用于一次性设置所有轮廓相关属性。
outline-color 还有一个 invert 取值，不过该值在现代浏览器中越来越少见，通常会被浏览器默认的焦点颜色（如蓝色）取代，小伙伴们可以直接忽略。

提示: outline-color 的取值与 border-color 的取值是一样的，小伙伴们可以对比理解。

CSS outline-color 摘要

属于	CSS 用户界面属性
使用频率	低
是否继承	否
默认值	auto
兼容性	查看
官方文档	查看
MDN	查看

CSS outline-color 示例

接下来，我们通过一个简单的例子来讲解一下 outline-color 属性是如何使用的。

示例：outline-color 基本用法

运行代码

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8">
    <style>
        input {
            outline-width: 4px;
            outline-style: solid;
        }

        /* 取值为关键字 */
        p:nth-of-type(1) > input { outline-color: red; }
        /* 取值为十六进制值 */
        p:nth-of-type(2) > input { outline-color: #9B26DE; }
        /* 取值为RGB值 */
        p:nth-of-type(3) > input { outline-color: rgb(39, 222, 198); }
        /* 取值为RGBA值 */
        p:nth-of-type(4) > input { outline-color: rgba(251, 145, 52, 0.8); }

    </style>
</head>
<body>
    <p><input type="text"></p>
    <p><input type="text"></p>
    <p><input type="text"></p>
    <p><input type="text"></p>
</body>
</html>

页面效果如下图所示。

outline-color 示例

outline 是一个复合属性

outline 其实是一个复合属性，它有 3 个子属性（如下表所示）。

outline 的子属性
子属性	说明
outline-width	轮廓线的宽度
outline-style	轮廓线的样式
outline-color	轮廓线的颜色