CSS 邊框顏色

CSS 邊框顏色

border-color 屬性用于設置四個邊框的顏色。

可以通過以下方式設置顏色：

  • name - 指定顏色名，比如 "red"
  • HEX - 指定十六進制值，比如 "#ff0000"
  • RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
  • HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
  • transparent

注釋：如果未設置 border-color，則它將繼承元素的顏色。

實例

演示不同的邊框顏色：

p.one {
  border-style: solid;
  border-color: red;
}
p.two {
  border-style: solid;
  border-color: green;
}
p.three {
  border-style: dotted;
  border-color: blue;
}

結果：

紅色實線邊框

綠色實線邊框

藍色點狀邊框

親自試一試

特定邊框的顏色

border-color 屬性可以設置一到四個值（用于上邊框、右邊框、下邊框和左邊框）。

實例

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* 上紅、右綠、下藍、左黃 */
}

親自試一試

HEX 值

邊框的顏色也可以使用十六進制值（HEX）來指定：

實例

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

親自試一試

RGB 值

或者使用 RGB 值：

實例

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

親自試一試

HSL 值

也可以使用 HSL 值：

實例

p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); /* 紅色 */
}

親自試一試

您可以在我們的 CSS 顏色 章節中學到有關 HEX、RGB 和 HSL 值的更多知識。