元素的逻辑块端边框颜色由 CSS 属性 border-block-end-color 确定，并根据元素的书写模式、方向性和文本方向转换为物理边框颜色。
根据为元素的 writing-mode ，direction和text-orientation 提供的值，其行为对应于border-top-color，border-right-color、border-bottom-color 或 border-left-color。
元素的其他边框颜色由相关属性定义border-block-start-color，border-inline-start-color 和 border-inline-end-color 定义。
属性值
<color>:边框的颜色。
语法
border-block-end-color = <color> | <image-1D> 适用范围
所有 HTML 元素。
CSS border-block-end-color: 使用十六进制颜色
以下示例演示了 border-block-end-color 属性与十六进制颜色值的用法。
<html>
<head>
<style>
.container {
background-color: #0c97ed;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
}
.demo-border {
writing-mode: horizontal-tb;
border: 8px dashed #111211;
border-block-end-color: white;
border-block-end-style: solid;
padding: 15px;
margin: 10px;
text-align: center;
font-family: 'Arial', sans-serif;
font-size: 20px;
color: #f5f4f0;
}
</style>
</head>
<body>
<div class="container">
<p class="demo-border">border-block-end-color 属性与十六进制颜色值的用法。</p>
</div>
</body>
</html> CSS border-block- end-color: 使用 RGB 颜色
以下示例演示了 border-block-end-color 属性与 RGB 颜色值的用法。
<html>
<head>
<style>
.container {
background-color: #f2f2eb;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
}
.demo-border {
writing-mode: horizontal-tb;
border: 8px double #111211;
border-block-end-color: rgb(230, 230, 94);
border-block-end-style: solid;
padding: 15px;
margin: 10px;
text-align: center;
font-family: 'Arial', sans-serif;
font-size: 20px;
color: black;
}
</style>
</head>
<body>
<div class="container">
<p class="demo-border">border-block-end-color 属性与RGB 颜色值的用法。</p>
</div>
</body>
</html> CSS border-block-end-color: 使用 HSL 颜色
以下示例演示了 border-block-end-color 属性与 HSL 颜色值的用法。
<html>
<head>
<style>
.container {
background-color: #c6f5d3;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
}
.demo-border {
writing-mode: horizontal-tb;
border: 8px double #111211;
border-block-end-color: hsl(120, 70%, 50%);
border-block-end-style: solid;
padding: 15px;
margin: 10px;
text-align: center;
font-family: 'Arial', sans-serif;
font-size: 20px;
color: black;
}
</style>
</head>
<body>
<div class="container">
<p class="demo-border">border-block-end-color 属性与HSL 颜色值的用法。</p>
</div>
</body>
</html> CSS border-block-end-color: 使用命名color
以下示例演示了 border-block-end-color 属性与命名颜色值的用法。
<html>
<head>
<style>
.container {
background-color: #c6e1f5;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
}
.demo-border {
writing-mode: horizontal-tb;
border: 8px dashed #111211;
border-block-end-color: blue;
border-block-end-style: solid;
padding: 15px;
margin: 10px;
text-align: center;
font-family: 'Arial', sans-serif;
font-size: 20px;
color: black;
}
</style>
</head>
<body>
<div class="container">
<p class="demo-border">border-block-end-color 属性与命名颜色值的用法。</p>
</div>
</body>
</html> CSS border-block-end-color: 使用 RGBA 颜色
以下示例演示了 border-block-end-color 属性在 RGBA 颜色值和垂直书写模式下的使用。
<html>
<head>
<style>
.container {
background-color: #c6e1f5;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
}
.demo-border {
writing-mode: vertical-rl;
border: 4px double #111211;
border-block-end-color: rgba(255, 0, 0, 0.7);
border-block-end-style: solid;
padding: 15px;
margin: 10px;
text-align: center;
font-family: 'Arial', sans-serif;
font-size: 20px;
color: black;
}
</style>
</head>
<body>
<div class="container">
<p class="demo-border">border-block-end-color 属性在 RGBA 颜色值和垂直书写模式下的使用。</p>
</div>
</body>
</html>