css3边框颜色设置

CSS3边框颜色设置

可以使用CSS3为元素设置边框的颜色。

基本语法

border-color: color|transparent|initial|inherit;

color: 可以使用颜色名称、十六进制、RGB、RGBA或HSL等方式设置颜色值。

transparent: 边框透明。

initial: 使用默认的边框颜色。

inherit: 继承父元素的边框颜色。

border-color属性同样支持缩写，可以同时设置四个方向的边框颜色：

border-color: top right bottom left;

如果只设置一个值，那么四个方向的颜色相同；如果设置两个值，那么上下的颜色相同，左右的颜色相同；如果设置三个值，那么上边框采用第一个值，左右边框采用第二个值，下边框采用第三个值。

示例代码

/*给p标签设置红色边框*/
p {
  border: 2px solid red;
}

/*用缩写方式设置四个方向的边框*/
p {
  border-color: green;
}

/*用缩写方式设置上下边框颜色不同*/
p {
  border-color: red blue;
}

/*用缩写方式设置四个方向的边框颜色不同*/
p {
  border-color: red blue green yellow;
}