CSS轮廓颜色属性用于控制元素轮廓线的颜色显示，轮廓是绘制在元素边框之外的一圈线条，不会占用页面布局空间，常用来实现元素聚焦提示、选中状态标识等交互效果。
CSS轮廓颜色属性的基本语法
轮廓颜色属性对应的CSS属性名为outline-color，它的基本语法格式如下：
/* 基本语法 */ outline-color: 颜色值;
该属性可以作用于所有可见的HTML元素，默认值是invert，表示浏览器会自动选择一个和元素背景色对比明显的颜色作为轮廓色，保证轮廓在不同背景下都能清晰可见。
outline-color的可选取值
outline-color支持多种颜色取值方式，常见的取值类型如下：
- 颜色关键字：直接使用CSS预定义好的颜色名称，比如red、blue、green等。
- 十六进制颜色值：以#开头的6位或3位十六进制数值，比如#ff0000、#f00。
- RGB/RGBA颜色值：使用rgb()或rgba()函数定义颜色，rgba还支持设置透明度，比如rgba(255,0,0,0.5)。
- HSL/HSLA颜色值：使用hsl()或hsla()函数定义颜色，同样支持透明度设置。
- invert：默认值，让浏览器自动计算对比色。
和其他轮廓属性的配合使用
outline-color需要和outline-style配合使用才会生效，因为默认情况下轮廓样式是none，没有样式的话颜色设置不会显示。同时还可以配合outline-width设置轮廓宽度，或者使用outline简写属性一次性设置所有轮廓相关属性。
单独设置轮廓属性示例
/* 先设置轮廓样式为实线，再设置轮廓宽度和颜色 */
.input-focus {
outline-style: solid;
outline-width: 2px;
outline-color: #1890ff;
}
使用outline简写属性示例
简写属性的顺序是outline-width outline-style outline-color，其中outline-style是必填项，其他两个可以省略使用默认值：
/* 简写设置轮廓：宽度2px，实线，蓝色 */
.btn-active {
outline: 2px solid #52c41a;
}
实际使用示例
下面是一个完整的HTML示例，展示不同轮廓颜色的实际效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS轮廓颜色示例</title>
<style>
.base {
width: 200px;
height: 60px;
margin: 20px;
border: 1px solid #d9d9d9;
outline-style: solid;
outline-width: 2px;
}
.red-outline {
outline-color: #ff4d4f;
}
.blue-outline {
outline-color: rgba(24, 144, 255, 0.7);
}
.green-outline {
outline-color: #52c41a;
}
</style>
</head>
<body>
<div class="base red-outline">红色轮廓</div>
<div class="base blue-outline">半透明蓝色轮廓</div>
<div class="base green-outline">绿色轮廓</div>
</body>
</html>
常见问题说明
- 轮廓颜色和边框颜色是独立的，修改
outline-color不会影响border-color的显示。 - 轮廓不占用布局空间，不会像边框那样影响元素的位置和尺寸计算。
- 如果同时设置了
outline-color和outline简写属性，简写属性中的颜色值会覆盖单独设置的outline-color值。 - 不是所有浏览器都支持
invert取值，在部分浏览器中可能会显示为黑色，建议需要兼容的场景手动指定具体颜色值。
CSSoutline_color轮廓样式前端样式修改时间：2026-07-21 05:57:22