CSS - border-block （边框块）属性_CSS 菜鸟教程

CSS 属性 border-block 是一个逻辑属性，它同时定义块维度中开始和结束的宽度、样式和颜色。

border-block 属性作用于块维度中的开始和结束。元素的书写模式、方向性和文本方向决定了哪些精确的物理边界会受到影响。
当写入模式设置为默认的水平方向时，border-block 将应用于元素的顶部和底部边界。
相反，垂直书写模式将边框块应用于左右边框。

可能的值

<border-width> - 边框的宽度。
<border-style> - 边框的线条样式。
<border-color> - 边框的颜色。

成分属性

此属性是以下 CSS 属性的简写：

语法


border-block: <border-block-width> || <border-block-style> || <border-block-color>

适用于

所有 HTML 元素。

CSS border-block - 基本示例

以下示例演示了 css border-block 属性。


<html>
<head>
<style>
	 .border-demo {
			width: 300px;
			height: 150px;
			margin: 20px;
			padding: 20px;
			background-color: #f0f0f0;
			border-block: 5px dotted #3498db; 
	 }
	 .add-demo {
			font-size: 18px;
			color: #111;
	 }
</style>
</head>
<body>
<div class="border-demo">
<p class="add-demo">This is a bordered element with padding and background color.</p>
<p>This is an example for border-block property</p>
</div>
</body>
</html>

CSS border-block - writing-mode 属性

以下示例演示了具有垂直写入模式的 CSS 属性 border-block。


<html>
<head>
<style>
	 .vertical-border {
			writing-mode: vertical-rl;
			direction: ltr;
			width: 150px;
			height: 250px;
			margin: 50px;
			padding: 20px;
			background-color: #f0f0f0;
			border-block: 1rem solid red; 
	 }
	 .add-style {
			font-size: 18px;
			color: #333;
	 }
</style>
</head>
<body>
<div class="vertical-border">
<p class="add-style">This is a vertical bordered element with a solid red border.</p>
</div>
</body>
</html>

相关属性

下表列出了一些相关属性：

属性	描述
border-block	速记属性。
border-block-start	用于设置各个逻辑块开始边界属性值的速记属性。
border-block-end	用于设置各个逻辑块-端边界属性值的速记属性。
border-block-color	定义元素的逻辑块边框的颜色。
border-block-start-color	定义元素的逻辑块开始边界的颜色。
border-block-end-color	定义元素的逻辑块端边框的颜色。
border-block-style	定义元素的逻辑块边框的样式。
border-block-start-style	定义元素的逻辑块开始边框的样式。
border-block-end-style	定义元素的逻辑块端边界的样式。
border-block-width	定义元素的逻辑块边界的宽度。
border-block-start-width	定义元素的逻辑块开始边界的宽度。
border-block-end-width	定义元素的逻辑块端边界的宽度。

<< CSS - 边框（border ） CSS - border-inline（边框内联） >>