Skip to main content

元素边框颜色 border-color

Docs

元素边框颜色​

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: 使用 <color> 来表示四个边框的颜色，仅用于单值语法。

  • horizontal: 使用 <color> 来表示水平（左边框和右边框）边框的颜色，仅用于双值语法。

  • vertical: 使用 <color> 来表示垂直（上边框和下边框）边框的颜色，仅用于双值或三值语法。

  • top: 使用 <color> 来表示上边框的颜色，仅用于三值或四值语法。

  • bottom: 使用 <color> 来表示下边框的颜色，仅用于三值或四值语法。

  • right: 使用 <color> 来表示右边框的颜色，仅用于四值语法。

  • left: 使用 <color> 来表示左边框的颜色，仅用于四值语法。

  • inherit: 这是一个关键词，用于指示四边的颜色值均继承自父元素的计算值。

语法​

border-color =
  <color>{1,4}

<color> = <absolute-color-base> | currentcolor | <system-color>

<absolute-color-base> = <hex-color> | <absolute-color-function> | <named-color> | transparent
<absolute-color-function> = <rgb()> | <rgba()> |
                            <hsl()> | <hsla()> | <hwb()> |
                            <lab()> | <lch()> | <oklab()> | <oklch()> |
                            <color()>

规范​

CSS Backgrounds and Borders Module Level 3 (w3c.github.io)

w3c_border-color

w3c_border-top-color

示例​

Loading Github Gist ...