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）指定輪廓顏色：

實例

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

親自試一試

RGB 值

或者通過使用 RGB 值：

實例

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

親自試一試

HSL 值

您還可以使用 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;
}

親自試一試