CSS 轮廓颜色
CSS 轮廓颜色
outline-color 属性用于设置轮廓的颜色。
可以通过以下方式设置颜色:
- name - 指定颜色名，比如 "red"
- HEX - 指定十六进制值，比如 "#ff0000"
- RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
- HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
- invert - 执行颜色反转（确保轮廓可见，无论是什么颜色背景）
下例展示了一些不同颜色的不同轮廓样式。请注意，这些元素在轮廓内还有黑色细边框:
红色的实线轮廓。
蓝色的点状轮廓。
灰色的凸边轮廓。
实例
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 值
您也可以使用十六进制值（HEX）指定轮廓颜色:
RGB 值
或者通过使用 RGB 值:
HSL 值
您还可以使用 HSL 值:
您可以在我们的 CSS 颜色 章节中学习有关 HEX、RGB 和 HSL 值的更多知识。
反转颜色
下例使用 outline-color: invert，执行了颜色反转。这样可以确保无论颜色背景如何，轮廓都是可见的:
反转颜色的实线轮廓。
