border-color简写属性：如何理解四值语法？

border-color 是一个用于设置元素四个边框颜色的快捷，或者说是简写属性：border-top-color, border-right-color, border-bottom-color, border-left-color 。border-color是一个简写样式属性。

示例：

border-top-color  上边框颜色 border-top-color:#369;
border-right-color  右边框颜色 border-right-color:#369;
border-bottom-color  下边框颜色 border-bottom-color:#fae45b;
border-left-color  左边框颜色 border-left-color:#efcd56;

border-color: red cyan gold;

等同于

border-top-color: red;
border-right-color: cyan;
border-bottom-color: gold;
border-left-color: cyan;

四个方向的简写规则，单值语法、双值语法、三值语法、四值语法：

• 一个：border-color 四个边框为同一颜色 border-color:#eeff34;
• 二个：上、下边框颜色：#369 左、右边框颜色：#000 border-color:#369 #000;
• 三个：上边框颜色：#369 左、右边框颜色：#000 下边框颜色：#f00 border-color:#369 #000 #f00;
• 四个：上、右、下、左边框颜色：#369、#000、#f00、#00f border-color:#369 #000 #f00 #00f;

当分别提供不同数目的样式值时，代表设置不同方向。这个规则也适用于其它样式。

关于颜色值样式函数rgb与rgba

颜色标准1中十六个颜色常量：

旧语法：

rgb(R, G, B)
rgba(R, G, B，A])

在CSS最新 颜色标准4 中，rgba()是rgb()的别称。

rgb[a](R, G, B[, A])
rgb[a](R G B[ / A])

在值内使用斜杠的简写属性还有font、background。

例如：

rgb(255 215 0/.5)
rgb(255 215 0)

接下来，看其它样式：

• padding
• margin
• border-width

2020年9月29日

【关于作者】

李艺，笔名“石桥码农，腾讯云最具价值专家（TVP），腾讯课堂启明星俱乐部成员，日行一课联合创始人兼 CTO，前 VIPKID 资深技术专家。国内早期闪客之一，具有 15 年以上互联网软件研发经验。

参与研发的音视频直播产品曾在腾讯 QQ 上线，为数千万人使用。从 0 到 1 创建课件标准，被团队誉为课件之父，官方评定为 Adobe 中国 15 位社区管理员之一。著有《小程序从0到1：微信全栈工程师一本通》等计算机图书，是极客时间视频畅销课《微信小程序全栈开发实战》的作者，知乎 Live 讲师，在行互联网技术专家。欢迎到“在行”找我一对一约聊。