CSS - border-block-start 属性

border-block-start是一个简写 CSS 属性，用于在 sinlge 声明中设置各个逻辑 block-start 边界属性的值。

border-block-start-width、border-block-start-style 和 border-block-start-color 的值可以使用简写 border-block-start 属性指定。
元素的书写模式、方向和文本方向决定了它如何映射到特定的物理边界;这些特征包括上边框、右边框、下边框和左边框。
它连接到确定元素的其他边界的属性，例如 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>Example</h1>
</header>
<main>
<section class="right-section">
<h2>Section</h2>
<p>Example of border-block-start, it has blue border</p>
<div class="exampleText">Example text</div>
</section>
</main>
</body>
</html>

CSS border-block-start - 写作模式

以下示例演示了 border-block-start 属性与 veritcal 写入模式的用法。


<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>Example</h1>
</header>
<main>
<section class="right-section">
<h2>Section</h2>
<p>Example of border-block-start, it has red border. It has vertical text.</p>
<div class="exampleText">Example text</div>
</section>
</main>
</body>
</html>

打印本页