CSS 简写属性 border-block-end 提供了一种简单的方法，可以在样式表内的一个位置设置所有逻辑块结束边框属性的值。
border-block-end-width 、border-block-end-style 和 border-block-end-color可以使用简写的border-block-end属性来指定。
writing-mode式、direction和text-orientation元素的属性，对应于 border-top、border-right、border-bottom 或 border-left 等特征，决定了它到特定物理边界的映射。
它是与指定元素剩余边框的属性关联，例如 border-block-start、border-inline-start 和 border-inline-end 。
属性值
border-block-end 可以用以下一项或多项指定:
<'border-width'>: 边框的宽度。
<'border-style'>: 边框的线条样式。
<color>: 边框的颜色。
构成属性
此属性是以下 CSS 属性的简写:
语法
border-block-end = <line-width> || <line-style> || <color> 适用范围
所有 HTML
CSS border-block-end: 基本示例
下面的示例演示了 border-block-end 属性的用法。
<html>
<head>
<style>
body {
background-color: lightgray;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
width: 250px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #333;
border-radius: 8px;
}
.border-text {
font-size: 20px;
text-align: center;
color: #333;
border-block-end: 10px dashed grey;
padding-block-end: 10px;
margin-block-end: 10px;
}
</style>
</head>
<body>
<div class="container">
<p class="border-text">基本示例。</p>
</div>
</body>
</html> CSS border-block-end: 写入模式
下面的示例演示了 border-block-end 属性的用法。
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #f1f1f1;
width: 180px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
border: 3px solid #ff6f61;
border-radius: 8px;
writing-mode: vertical-rl;
}
.demo-box {
font-size: 20px;
text-align: center;
color: #333;
border-block-end: 1rem solid #4caf50;
padding-block-end: 1.5rem;
margin-block-end: 1rem;
}
</style>
</head>
<body>
<div class="container">
<p class="demo-box">垂直书写模式的 border-block-end 示例。</p>
</div>
</body>
</html>