手册
目录
outline-color 属性用于设置轮廓的颜色。
可以通过以下方式设置颜色：
下例展示了一些不同颜色的不同轮廓样式。请注意，这些元素在轮廓内还有黑色细边框：
红色的实线轮廓。
蓝色的点状轮廓。
灰色的凸边轮廓。
p.ex1 {
border: 2px solid black;
outline-style: solid;
outline-color: red;
}
p.ex2 {
border: 2px solid black;
outline-style: dotted;
outline-color: blue;
}
p.ex3 {
border: 2px solid black;
outline-style: outset;
outline-color: grey;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
您也可以使用十六进制值（HEX）指定轮廓颜色：
p.ex1 {
outline-style: solid;
outline-color: #ff0000; /* 红色 */
}
运行实例 »点击 "运行实例" 按钮查看在线实例
或者通过使用 RGB 值：
p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /* 红色 */
}
运行实例 »点击 "运行实例" 按钮查看在线实例
您还可以使用 HSL 值：
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%); /* 红色 */
}
运行实例 »点击 "运行实例" 按钮查看在线实例
您可以在我们的 CSS 颜色 章节中学习有关 HEX、RGB 和 HSL 值的更多知识。
下例使用 outline-color: invert，执行了颜色反转。这样可以确保无论颜色背景如何，轮廓都是可见的：
反转颜色的实线轮廓。
p.ex1 {
border: 1px solid yellow;
outline-style: solid;
outline-color: invert;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
70.9万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习
