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