css border-color属性用法
分类：实例代码
此属性可以设置元素边框的颜色。
它是一个符合属性，具体规则如下:
（1）.如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框。
（2）.如果只提供一个，将用于全部的四条边。
（3）.如果提供两个，第一个用于上－下，第二个用于左－右。
（4）.如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
对应的脚本特性为borderColor 。
代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
div {
width:100px;
height:50px;
background:#ccc;
border-style:solid;
border-width:5px;
border-color:blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
上面的代码可以设置div元素的边框颜色为蓝色。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
div {
width:100px;
height:50px;
background:#ccc;
border-style:solid;
border-width:5px;
border-color:blue red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
上面的代码可以分别设置上下边框颜色为蓝色，左右边框颜色为红色。
不再演示三个或者四个参数的效果;我们也可以设置边框为透明，通常应用这个功能来制作三角形效果。
具体可以参阅css使用:after或者:before实现三角形箭头效果一章节。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu