CSS border-left-color 属性
CSS border-left-color 属性技术文档
CSS border-left-color 属性用于设置元素的左边框颜色。
语法
border-left-color: value;
value 参数可以接受 CSS 定义的颜色、RGB 值、十六进制值、HSL 值、或者transparent。同时,也可以使用关键字currentColor,表示使用与color属性相同的值。
取值范围
颜色值,可以使用CSS定义的颜色值(如red等),RGB值、十六进制值、HSL值,或transparent。
代码样例
.border{
border-left: 5px solid;
border-left-color: red;
}
属性值
CSS定义的颜色值
border-left-color 属性可以接受 CSS 定义的颜色值(如red, blue, green 等等)。
RGB 值和十六进制值
也可以使用RGB 值和十六进制值来设置 border-left-color,以描述更具体的颜色。
.border{
border-left-color: #000000;
border-left-color: rgb(0,0,0);
}
HSL 值
可以通过HSL值来进行描述,HSL是一种基于人眼感知颜色的颜色描述方式。
.border{
border-left-color: hsla(240, 50%, 50%, 0.5);
}
transparent
transparenet 表示设置为透明。
.border{
border-left-color: transparent;
}
currentColor
currentColor 关键字可以使用当前元素的 color 属性作为边框颜色。
.border{
color: #000000;
border-left-color: currentColor;
}
常见问题
1.设置 left属性不成功
在使用 border-left-color 属性时,如果没有成功的更改边框颜色,那么可以检查下 border-left-width 和 border-left-style 是否设置正确,基本上必须有这两个属性才能生效。
结论
用 CSS border-left-color 属性可以很方便地设置元素边框的左边颜色。在格外注重网站UI设计和可视化感的今天,这个属性的使用越来越普遍。