首页 > CSS教程 > CSS 边框颜色
此章节介绍:

    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 值的更多知识。