CSS 外轮廓颜色

这个outline-color属性用于设置外轮廓的颜色。

颜色可以通过以下方式设置：

name - 指定颜色名称，例如"red"
HEX - 指定十六进制值，例如"#ff0000"
RGB - 指定 RGB 值，例如"rgb(255,0,0)"
HSL - 指定 HSL 值，例如"hsl(0, 100%, 50%)"
反转 - 执行颜色反转（这确保外轮廓可见，无论颜色背景如何）

以下示例显示了一些具有不同颜色的不同外轮廓。另请注意，这些元素的外轮廓内还有一个细黑色边框：

实心红色轮廓。

蓝色虚线轮廓。

一开始的灰色轮廓。

示例

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; /* red */
}

亲自试一试 »

RGB 值

或者使用 RGB 值：

示例

p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /* red */
}

亲自试一试 »

HSL 值

您还可以使用 HSL 值：

示例

p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%); /* red */
}

亲自试一试 »

您可以在我们的文章中了解有关 HEX、RGB 和 HSL 值的更多信息CSS 颜色章节。