Kulay ng Outline ng CSS

Kulay ng Outline ng CSS

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

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

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

下例展示了一些不同颜色的不同轮廓样式。请注意，这些元素在轮廓内还有黑色细边框：

红色的实线轮廓。

蓝色的点状轮廓。

灰色的凸边轮廓。

Example

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;
}

Try It Yourself

HEX 值

您也可以使用十六进制值（HEX）指定轮廓颜色：

Example

p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; /* 红色 */
}

Try It Yourself

RGB 值

或者通过使用 RGB 值：

Example

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

Try It Yourself

HSL Values

You can also use HSL values:

Example

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

Try It Yourself

You can find more information in our Kulay ng CSS Learn more about HEX, RGB, and HSL values in the chapter.

Reverse Color

The following example uses outline-color: invertExecuted Color Inversion. This ensures that the outline is visible regardless of the color background:

Reverse Color Solid Outline

Example

p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}

Try It Yourself