一、bordercolorlight属性
bordercolorlight是CSS2中定义的属性。它会指定一个3D边框的亮色区域的颜色。
在CSS3中，使用border-top-color、border-right-color、border-bottom-color、border-left-color来替代bordercolorlight，实现更细粒度的控制。
div {
border-style: solid;
border-width: 10px;
border-color: #333 #555 #777 #999;
border-color-light: #FFF;
}
二、border-color是CSS3吗
是的，border-color是CSS3中定义的属性。
它可以像border-width一样，用简写形式同时定义上、右、下、左四个方向的边框颜色，其中任意一个方向可以使用transparent。
div {
border: 5px solid #333;
border-color: red green blue;
}
三、bordercolor属性设置边框颜色
bordercolor是CSS2.1中定义的属性，用于设置边框颜色。
注意，它必须与border-style和border-width一起使用才有效果。
div {
border-style: solid;
border-width: 10px;
border-color: #333;
}
四、background color选择
background-color与border-color经常一起使用，来实现漂亮的UI。
在选取background-color时，需要注意与border-color形成对比，避免过于相近造成视觉混乱。
以下是一些常用的搭配：
- 白色背景、黑色边框
- 黑色背景、白色边框
- 蓝色背景、浅蓝色边框
- 灰色背景、暗灰色边框
- 绿色背景、浅绿色边框
div {
background-color: #FFF;
border: 2px solid #000;
}
五、总结
通过以上的讲解，我们了解了bordercolor、bordercolorlight、border-color和background-color的用法和注意事项，希望对您有所帮助。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/270548.html
微信扫一扫 
支付宝扫一扫 