border-block-start 是一个简写 CSS 属性，用于设置单个声明中各个逻辑块起始边框属性的值。
border-block-start-width、border-block-start-style 和 border-block-start-color 值 可以使用简写的 border-block-start 属性来指定。
writing-mode、direction 决定了它如何映射到特定的物理边界；这些特征包括 border-top、border-right、border-bottom和border-left。
它连接到确定元素其他边框的属性，例如 border-block-end、border-inline-start 和 border-inline-end。
属性值
border-block-start 可以按任意顺序指定以下一项或多项:
<'border-width'>: 边框的宽度。
<border-style'>: 边框的线条样式。
<color>: 边框的颜色。
组成属性
此属性是以下 CSS 属性的简写:
语法
border-block-start = <line-width> || <line-style> || <color> 适用范围
所有 HTML 元素。
CSS border-block-start: 基本示例
以下示例演示了border-block-start 属性的用法。
<html>
<head>
<style>
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
section {
flex: 1;
padding: 20px;
background-color: #fff;
margin: 10px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
}
.right-section {
display: flex;
flex-direction: column;
align-items: center;
}
.exampleText {
border-block-start: 7px dashed blue;
margin-top: 20px;
padding: 10px;
background-color: #ffcc00;
font-weight: bold;
}
</style>
</head>
<body>
<header>
<h1>例子</h1>
</header>
<main>
<section class="right-section">
<h2>Section</h2>
<p>border-block-start 的示例，它有蓝色边框</p>
<div class="exampleText">示例文本</div>
</section>
</main>
</body>
</html> CSS border-block-start: 书写模式
以下示例演示了 border-block-start 属性在垂直书写模式下的使用.
<html>
<head>
<style>
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
section {
flex: 1;
padding: 20px;
background-color: #fff;
margin: 10px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 1);
}
.right-section {
display: flex;
flex-direction: column;
align-items: center;
}
.exampleText {
writing-mode: vertical-rl;
border-block-start: 0.6rem solid red;
margin-top: 20px;
padding: 10px;
background-color: #ffcc00;
font-weight: bold;
}
</style>
</head>
<body>
<header>
<h1>例子</h1>
</header>
<main>
<section class="right-section">
<h2>Section</h2>
<p>border-block-start 的示例，它有红色边框。 它有垂直文本。</p>
<div class="exampleText">示例文本</div>
</section>
</main>
</body>
</html>