CSS Border-Block-Farbe Eigenschaft

Definition und Verwendung

border-block-color Die Eigenschaft setzt die Farbe der Kanten des Elements in der Blockrichtung fest.

注意：Um border-block-color Die Eigenschaft tritt in Kraft, muss jedoch eingestellt werden border-block-style。

border-block-color Der Wert der Eigenschaft kann auf verschiedene Weise eingestellt werden:

如果 border-block-color Die Eigenschaft hat zwei Werte:

border-block-color: pink lightblue;

• 块起始处的边框颜色为 pink
• 块结束处的边框颜色为 lightblue

如果 border-block-color 属性有一个值：

border-block-color: pink;

• 块起始处和结束处的边框颜色均为 pink

CSS 的 border-block-color 属性与 border-bottom-color、border-left-color、border-right-color 和 border-top-color 属性非常相似，但 border-block-color 属性依赖于块方向。

注意：相关的 CSS 属性 writing-mode 定义了块方向。这会影响块的起点和终点位置以及 border-block-color 属性的结果。对于英文页面，行内方向是从左到右，块方向是向下。

实例

例子 1

为块方向上的边框设置颜色：

#example1 {
  border-block-style: solid;
  border-block-color: pink;
}
#example2 {
  border-block-style: solid;
  border-block-color: pink lightblue;
}

亲自试一试

例子 2：结合 writing-mode 属性

块方向上边框颜色的起点和终点位置受 writing-mode 属性的影响：

div {
  writing-mode: vertical-rl;
  border-block-color: blue;
}

亲自试一试

CSS 语法

border-block-color: color|transparent|initial|inherit;

属性值

技术细节

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

Verwandte Seiten

Tutorial:CSS Rahmen

Referenz:CSS Border Eigenschaft

Referenz:CSS Border-Block Eigenschaft

Referenz:CSS Border-Block-End-Farbe Eigenschaft

Referenz:CSS Border-Block-Start-Farbe Eigenschaft

Referenz:CSS Border-Block-Stil Eigenschaft

Referenz:CSS Border-BOTTOM-Breite Eigenschaft

Referenz:CSS border-left-width Eigenschaft

Referenz:CSS border-right-width Eigenschaft

Referenz:CSS border-top-width Eigenschaft

Referenz:CSS writing-mode Eigenschaft