css border 边框属性

通过border-color可以设置边框的颜色。

语法

border-color: 颜色值;

设置边框的颜色值有3种方式。

  • 名称：指定颜色名称。例如："red"。
  • RGB：指定颜色的RGB值。例如："rgb(255,0,0)"。
  • Hex：指定颜色的十六进制值。例如："#ff0000"。

border-color 属性不能单独使用。它需要与"border-style"属性等其他边框属性一起使用，以首先设置边框，否则它将不起作用。

多边框定义

当然，一个块级元素有4个边，所以，border-color可以同时设置四个边框不同的颜色。其语法为：
border-color: 上边 [右边 下边 左边];
例如： 
{borer-color: red orange orange orange ;}    /*四个值为上、右、下、左*/
/*或*/
P{borer-color: red orange orange ;}       /*三个值为上、左右、下・/
/*或*/
P{borer-color: red orange;}       /*2个值为上下、左右・/

例子

通过下面的例子理解 border-color 的使用方法。

<!DOCTYPE html>
<html>
	<title>css 边框颜色 border-color</title>
<head>
<style>
p.one {
    border-style: solid;
    border-color: red;
}
p.two {
    border-style: solid;
    border-color: #98bf21;
} 
</style>
</head>
<body>
<p class="one">这是一个实心的红色边框</p>
<p class="two">这是一个实心的绿色边框</p>
</body>
</html>

效果如下：

css 边框属性 border

再看一个多边框颜色定义的例子

<!DOCTYPE html>
<html>
	<title>css 边框颜色 border-color</title>
<head>
<style>
p.one {
    border-style: solid;
    border-color: red orange orange orange ;
}
p.two {
    border-style: solid;
    border-color: red orange orange ;
} 
p.thre {
    border-style: solid;
    border-color: red orange;
} 
</style>
</head>
<body>
	<h3>yxjc123.com 多边框颜色定义</h3>
<p class="one">1</p>
<p class="two">2</p>
<p class="thre">3</p>

</body>
</html>
效果如图：

css border-color边框颜色