CSS border-color属性

CSS的border-color属性用于指定边框的颜色。这个属性可以单独指定每个边框的颜色，也可以一次性为全部边框指定一个颜色。border-color的值可以是CSS3定义的颜色名称、RGB、十六进制值或者HSL值。

一、设置单个边框颜色

要为单个边框设置颜色，可以使用以下方式：

    
.example {
    border-left-color: red; /* 左边框为红色 */
    border-right-color: blue; /* 右边框为蓝色 */
}
    

上面的代码将.example元素的左边框颜色设置为红色，右边框的颜色设置为蓝色。

二、设置所有边框颜色

要一次性设置所有边框的颜色，可以使用以下方式：

    
.example {
    border-color: #ccc; /* 所有边框颜色为灰色 */
}
    

上面的代码将.example元素的所有边框颜色设置为灰色。

三、透明边框

有时候我们需要边框不显示，可以使用透明边框的方式来实现：

    
.example {
    border: 5px solid transparent;
}
    

上面的代码将.example元素的边框宽度设置为5像素、边框样式设为实线、边框颜色设为透明。

四、渐变边框

使用渐变边框可以让边框更加美观，以下是一个示例：

    
.example {
    border: 10px solid;
    border-image: linear-gradient(to bottom, #f00, #0f0) 1;
}
    

上面的代码将.example元素的边框宽度设置为10像素、边框样式设为实线、边框颜色使用线性渐变，渐变从上到下，颜色分别为红色、绿色。

五、圆角边框

为边框添加圆角可以让边框更加圆润，以下是一个示例：

    
.example {
    border: 10px solid;
    border-radius: 20px;
}
    

上面的代码将.example元素的边框宽度设置为10像素、边框样式设为实线、边框颜色为默认颜色、边框圆角半径设置为20像素。

六、总结

border-color属性可以单独为每个边框设置颜色，也可以一次性为所有边框设置一个颜色。还支持透明边框、渐变边框和圆角边框等高级用法。