CSS | border-block-color 属性介绍

CSS中的 border-block-color 属性用于设置垂直方向（即文本块之间的方向）的边框颜色。此属性为 CSS Logical Properties 之一，它可以在不改变文本方向的情况下对文本行方向和块方向使用相同的代码。

语法

/* 声明单个方向的边框颜色 */
border-block-color: color;
/* 所有方向边框颜色 */
border-block-color: color color;
border-block-color: color color color;
border-block-color: color color color color;

/* 也可以使用关键字 */
border-block-color: currentcolor; /* 使用当前文本颜色 */
border-block-color: inherit;
border-block-color: initial;
border-block-color: unset;

取值

• color：指定边框颜色，可使用 CSS 支持的颜色值，如十六进制、rgb、rgba 等。

• currentcolor：使用元素的字体颜色作为边框颜色。

• inherit：继承父元素的值。

• initial：设置属性为默认值。

• unset：取消继承，如果该属性没有继承，等价于 initial，否则等价于 inherit。

示例

设置一个边框颜色

p {
  border-block-color: #f00;
}

设置不同方向的边框颜色

p {
  border-block-color: #f00 #0f0 #00f #ccc;
}

使用 currentcolor

p {
  color: blue;
  border-block-color: currentcolor;
}

兼容性

| Chrome | Safari | Firefox | Opera | Edge | IE | | ------ | ------ | ------- | ----- | ---- | -- | | 69 | 12.1 | 68 | 56 | 18 | - |

边框逻辑属性是在CSS Level 3规范中定义的，因此在一些较老的浏览器中不被支持。建议在使用时进行浏览器兼容性测试。

总结

• border-block-color 属性设置元素垂直方向的边框颜色。

• 可以通过 color 属性指定边框颜色，还可以使用 currentcolor， inherit，initial和unset作为边框颜色。

• border-block-color 与其他 border 相关属性可以组合使用。

• CSS Logic Properties 可以使书写风格更加简洁，更加灵活，同时还能够提高移动端响应能力。