CSS 边框颜色

CSS 边框颜色

border-color 属性用于设置四个边框的颜色。

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

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

注释：如果未设置 border-color，则它将继承元素的颜色。

实例

演示不同的边框颜色：

  1. p.one {
  2.   border-style: solid;
  3.   border-color: red;
  4. }
  6. p.two {
  7.   border-style: solid;
  8.   border-color: green;
  9. }
  11. p.three {
  12.   border-style: dotted;
  13.   border-color: blue;
  14. }

结果：

红色实线边框

绿色实线边框

蓝色点状边框

特定边框的颜色

border-color 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

实例

  1. p.one {
  2.   border-style: solid;
  3.   border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
  4. }

HEX 值

边框的颜色也可以使用十六进制值（HEX）来指定：

实例

  1. p.one {
  2.   border-style: solid;
  3.   border-color: #ff0000; /* 红色 */
  4. }

RGB 值

或者使用 RGB 值：

实例

  1. p.one {
  2.   border-style: solid;
  3.   border-color: rgb(255, 0, 0); /* 红色 */
  4. }

HSL 值

也可以使用 HSL 值：

实例

  1. p.one {
  2.   border-style: solid;
  3.   border-color: hsl(0, 100%, 50%); /* 红色 */
  4. }

您可以在我们的 CSS 颜色 章节中学到有关 HEX、RGB 和 HSL 值的更多知识。