#border-color

#介绍

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

#使用示例

css-apisrc/border-color/App.tsx

Code

预览

#语法

/* 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;

#取值

• <color> 支持单值、双值、三值和四值语法。
  
  • 单值语法：
    同时指定四个边框的颜色。
  • 双值语法：
    第一个值指定上边框 border-top-color 和下边框 border-bottom-color 的值。
    第二个值指定左边框 border-left-color 和右边框 border-right-color 的值。
  • 三值语法：
    第一个值指定上边框 border-top-color 的值。
    第二个值指定左边框 border-left-color 和右边框 border-right-color 的值。
    第三个值指定下边框 border-bottom-color 的值。
  • 四值语法：
    第一个值指定上边框 border-top-color 的值。
    第二个值指定右边框 border-right-color 的值。
    第三个值指定下边框 border-bottom-color 的值。
    第四个值指定左边框 border-left-color 的值。

#形式定义

#形式语法

<color>{1, 4}

#兼容性