一、基础概念
CSS 的 border 属性可以为元素添加边框，其中包括边框的宽度、样式和颜色。
使用 border-color 属性可以为边框指定颜色。
二、语法
div {
border-color: red;
}
上述代码可以为所有的 div 元素添加红色边框。
border-color 属性同时可以设定多个颜色值，来设置对应垂直方向上四条边的边框颜色。如下所示：
div {
border-color: red green blue yellow;
}
上述代码中，分别设置上、右、下、左四条边为红色、绿色、蓝色、黄色。
三、其他用法
1. 使用不同的颜色为每条边指定颜色
使用上述语法中的参数个数为4个，分别代表 top, right, bottom 和 left 的颜色。但也可以为某些边只设定特定的颜色，比如为左边和右边设定相同的颜色，而其余两条边设定不同的颜色，如下所示：
div {
border-color: red green blue red;
}
上述代码中，左右边的颜色为红色，上边的颜色为绿色，下边的颜色为蓝色。
2. 使用透明度为边框添加半透明效果
使用 rgba 颜色值可以为边框添加半透明效果，如下所示：
div {
border-color: rgba(255, 192, 203, 0.5);
}
上述代码中，为 div 元素的边框添加了粉色，透明度为0.5的半透明效果。
3. 针对不同状态的边框颜色
使用 :hover 等伪类选择器可以为元素不同状态下指定不同的边框颜色：
div {
border: 2px solid blue;
}
div:hover {
border-color: red;
}
上述代码中，为 div 元素添加了2像素粗的蓝色实边框，当鼠标悬停于该元素上方时，边框颜色会变为红色。
四、总结
使用 border-color 属性可以为元素添加边框的颜色，它支持单独为每条边设置颜色，也可以使用 rgba 颜色值添加半透明效果。此外，还可以使用伪类选择器为元素不同状态下设置不同颜色的边框，从而丰富页面的交互效果。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/186134.html
微信扫一扫 
支付宝扫一扫 