❮ CSS 边框宽度
CSS 边框各边 ❯
CSS 边框颜色
更新于 2024/5/20 13:03:00
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; /* red */}
亲自试一试 »
RGB 值
或者使用 RGB 值:
实例
p.one { border-style: solid; border-color: rgb(255, 0, 0);
/* red */}
亲自试一试 »
HSL 值
也可以使用 HSL 值:
实例
p.one { border-style: solid; border-color: hsl(0, 100%, 50%);
/* red */}
亲自试一试 »
您可以在我们的 CSS 颜色 章节中学到有关 HEX、RGB 和 HSL 值的更多知识。
❮ CSS 边框宽度
CSS 边框各边 ❯