CSS border-top-color 属性
CSS border-top-color 属性
CSS border-top-color 属性可以为元素的顶部边框指定颜色。顶部边框是垂直于元素的边框的一部分,它是元素边框的四个部分之一。
语法
border-top-color: color;
其中,color 可以是十六进制颜色值、RGB、RGBA、HSL、HSLA 或者预定义颜色名称。
默认值
默认值为当前文本颜色。
取值
border-top-color 的取值方式和颜色值相似,可以有以下几种情况:
- 颜色值:使用十六进制、RGB、RGBA、HSL、HSLA 或预定义颜色名称;
- transparent:为透明;
- currentColor:与当前文本颜色相同;
- inherit:从父级元素继承。
实例
div{
border: 2px solid #eaeaea;
border-top-color: red;
}
该示例代码为 div 元素添加了一条 2 像素粗的红色顶部边框。其他三条边框的颜色均为 #eaeaea。
注意事项
- border-top-color 只能设置顶部边框的颜色,而不能同时设置其他三个边框的颜色。
- 如果某个方向的边框颜色没有被定义,那么会继承其他边框的颜色,或者默认使用当前文本颜色。
- 当设置了 border-top-style 属性时,该属性才会起作用。如果未设置 border-top-style,则不会显示顶部边框,因此无法设置其颜色。
浏览器兼容性
border-top-color 属性的兼容性良好,常见的浏览器均支持该属性。如果对浏览器的兼容性有疑虑,可以采用 CSS 预编译器生成相应的浏览器前缀,例如:
div{
-webkit-border-top-color: red;
-moz-border-top-color: red;
-o-border-top-color: red;
border-top-color: red;
}
以上代码可以确保各种浏览器均能正确识别 border-top-color 属性。