CSS border-block-color 属性用于指定元素的逻辑块边框的颜色。该属性根据书写模式、方向性和文本方向应用于物理边界。
语法
border-block-color: color | transparent | initial | inherit;
属性值
| 值 | 描述 |
|---|---|
| color | 指定边框的颜色。可以使用不同的颜色格式（名称，RGB值，十六进制值，HSL值等）。默认颜色是元素的当前颜色。 |
| transparent | 指定边框必须是透明的。 |
| initial | 将该属性设置为其默认值。 |
| inherit | 将继承父元素的属性。 |
CSS border-block-color颜色属性的示例
以下示例说明了具有不同值的 border-block-color 属性。
按颜色名称划分的border-block-color颜色
可以使用颜色名称来设置边框块的颜色。在以下示例中，已使用红色来设置块边框颜色。
<!DOCTYPE html>
<html>
<head>
<style>
#named-color {
border: 7px solid black;
border-block-color: red;
padding: 15px;
}
</style>
</head>
<body>
<div>
<h2>
CSS border-block-color Property
</h2>
<p id="named-color">
This is a bordered element with
a specific border-block-color with
color name.
</p>
</div>
</body>
</html>
border-block-color颜色（按十六进制值）
边框块的颜色也可以使用十六进制值进行设置。在以下示例中，十六进制值 #9999ff 已用于设置块边框颜色。
<!DOCTYPE html>
<html>
<head>
<style>
#hexa {
border: 7px solid black;
border-block-color: #9999ff;
padding: 15px;
}
</style>
</head>
<body>
<div>
<h2>CSS border-block-color property</h2>
<p id="hexa">
This is a bordered element with
a specific border-block-color using
hex value.
</p>
</div>
</body>
</html>
按 RGB 值划分的border-block-color颜色
边框块的颜色也可以使用 rgb 值进行设置。在以下示例中，已使用 rgb 值 （204,102,255） 来设置块边框颜色。
<!DOCTYPE html>
<html>
<head>
<style>
#rgb {
border: 7px solid black;
border-block-color:rgb(204, 102, 255);
padding: 15px;
}
</style>
</head>
<body>
<div>
<h2>
CSS border-block-color Property
</h2>
<p id="rgb">
This is a bordered element with
a specific border-block-color using
rgb value.
</p>
</div>
</body>
</html>
按 HSL 值划分的border-block-color颜色
边框块的颜色也可以使用 hsl 值进行设置。在以下示例中，已使用 hsl 值 （40、100%、70%） 来设置块边框颜色。
<!DOCTYPE html>
<html>
<head>
<style>
#hsl {
border: 7px solid black;
border-block-color:hsl(40, 100%, 70%);
padding: 15px;
}
</style>
</head>
<body>
<div>
<h2>
CSS border-block-color Property
</h2>
<p id="hsl">
This is a bordered element with
a specific border-block-color using
hsl value.
</p>
</div>
</body>
</html>
透明border-block-color颜色
为了设置透明边框块颜色，我们使用透明值。在以下示例中，透明值已用于设置块边框颜色。顶部和底部边框不可见。
<!DOCTYPE html>
<html>
<head>
<style>
#hsl {
border: 7px solid black;
border-block-color:transparent;
padding: 15px;
}
</style>
</head>
<body>
<div>
<h2>
CSS border-block-color Property
</h2>
<p id="hsl">
This is a bordered element with
a specific border-block-color using
transparent value.
</p>
</div>
</body>
</html>
不同的 border-block 颜色与border-block-color颜色
要设置不同的 border-block-color 颜色，我们可以为 border-block-color 属性指定两种不同的颜色。第一种颜色应用于第一边框，第二种颜色应用于第二边框。在以下示例中，橙色和棕色与 border-block-color 一起使用。
<!DOCTYPE html>
<html>
<head>
<style>
#hsl {
border: 7px solid black;
border-block-color: orange brown;
padding: 15px;
}
</style>
</head>
<body>
<div>
<h2>
CSS border-block-color Property
</h2>
<p id="hsl">
This is a bordered element with
a specific border-block-color using
different color values.
</p>
</div>
</body>
</html>
具有写入模式的border-block-color颜色
border-block-color 属性受书写模式的影响，书写模式决定了边框方向。在水平模式下，它为顶部和底部边框着色，而在垂直模式下，它为左边框和右边框着色，如以下示例所示。
<!DOCTYPE html>
<html>
<head>
<style>
#horizontal {
border: 7px solid black;
writing-mode: horizontal-tb;
border-block-color: blue purple;
padding: 20px;
}
#vertical {
border: 7px solid black;
writing-mode: vertical-rl;
border-block-color: blue purple;
padding: 20px;
}
</style>
</head>
<body>
<div>
<h2>
CSS border-block-color Property
</h2>
<p id="horizontal">
This shows the horizontal coloring of
the border-block-color property.
</p>
<p id="vertical">
This shows the vertical coloring of
the border-block-color property.
</p>
</div>
</body>
</html>
支持的浏览器
| 属性 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| border-block-color | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
