border-color

CSS属性 border-color 是一个用于设置元素四个边框颜色的快捷属性： border-top-color, border-right-color, border-bottom-color, border-left-color。

示例

/* border-color: color; 单值语法 */ 
border-color: red;

/* border-color: vertical horizontal; 双值语法*/
border-color: red #f015ca;

/* border-color: top horizontal bottom; 三值语法 */
border-color: red yellow green;

/* border-color: top right bottom left; 四值语法 */
border-color: red yellow green blue;

border-color: inherit

浏览器支持

语法

取值：

• color：使用来表示四个边框的颜色，仅用于单值语法。
• horizontal：使用来表示水平（左边框和右边框）边框的颜色，仅用于双值语法。
• vertical：使用来表示垂直（上边框和下边框）边框的颜色，仅用于双值或三值语法。
• top：使用来表示上边框的颜色，仅用于三值或四值语法。
• bottom：使用来表示下边框的颜色，仅用于三值或四值语法。
• right：使用来表示右边框的颜色，仅用于四值语法。
• left：使用来表示左边框的颜色，仅用于四值语法。
• inherit：这是一个关键词，用于指示四边的颜色值均继承自父元素的计算值。

实例

#justone {
  border-color: red;
}

#horzvert {
  border-color: gold red;
}

#topvertbott {
  border-color: red cyan gold;
}

#trbl {
  border-color: red cyan black gold;
}

div {
  border: solid 0.3em;
  width: auto;
  margin: 0.5em;
  padding: 0.5em;
}

ul {
  margin: 0;
  list-style: none;
} 
 
border-color: red; is equivalent to
 
border-top-color: red;
 
border-right-color: red;
 
border-bottom-color: red;
 
border-left-color: red;
 
 
border-color: gold red; is equivalent to
 
border-top-color: gold;
 
border-right-color: red;
 
border-bottom-color: gold;
 
border-left-color: red;
 
 
border-color: red cyan gold; is equivalent to
 
border-top-color: red;
 
border-right-color: cyan;
 
border-bottom-color: gold;
 
border-left-color: cyan;
 
 
border-color: cyan black gold; is equivalent to
 
border-top-color: red;
 
border-right-color: cyan;
 
border-bottom-color: black;
 
border-left-color: gold;
 

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com