CSS - border-block-width 属性_CSS 菜鸟教程

逻辑块边框的宽度由 CSS 属性 border-block-width 定义，该属性根据元素的书写模式、方向性和文本方向映射到物理边框宽度。

根据 writing-mode、direction 和 text-orientation 提供的值其映射与 border-left-width 和 border-right-width 或 border-top-width 和 border-bottom-width 属性相关。
border-inline-width 属性可用于定义其他维度的边框宽度。border-inline-start-width 和 border-inline-end-width 值均已配置。

可能的值

<border-width> - 边框的宽度。

语法

border-block-width = <'border-top-width'>{1,2}

适用于

所有 HTML 元素。

CSS border-block-width - 瘦值

以下示例演示了 border-block-width 属性以及 thin width value 的用法。

<html>
<head>
<style>
	 	body {
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 margin: 50px;
	 	 	 padding: 50px;
	 	 	 background-color: #f0f0f0;
	 	}
	 	.new-container {
	 	 	 background-color: #f0e8e6;
	 	 	 width: 400px;
	 	 	 height: 400px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 15px;
	 	 	 box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8);
	 	}
	 	.custom-border {
	 	 	 border: 4px dashed #e74c3c;
	 	 	 border-block-width: thin;
	 	 	 padding: 15px;
	 	 	 margin: 10px;
	 	 	 font-size: 22px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="new-container">
<p class="custom-border">A example with border-block-width property with thin style</p>
</div>
</body>
</html>

CSS border-block-width - 中等值

以下示例演示了 border-block-width 属性以及 medium width value 的用法。

<html>
<head>
<style>
	 	body {
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 margin: 50px;
	 	 	 padding: 50px;
	 	 	 background-color: #f0f0f0;
	 	}
	 	.new-container {
	 	 	 background-color: #ebad9b;
	 	 	 width: 400px;
	 	 	 height: 400px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 15px;
	 	 	 box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8);
	 	}
	 	.custom-border {
	 	 	 border: 4px dashed #b5401d;
	 	 	 border-block-width: medium;
	 	 	 padding: 15px;
	 	 	 margin: 10px;
	 	 	 font-size: 22px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="new-container">
<p class="custom-border">A example with border-block-width property with medium style</p>
</div>
</body>
</html>

CSS border-block-width - 厚值

以下示例演示了 border-block-width 属性以及 thick width value 的用法。

<html>
<head>
<style>
	 	body {
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 margin: 50px;
	 	 	 padding: 50px;
	 	 	 background-color: #f0f0f0;
	 	}
	 	.new-container {
	 	 	 background-color: #ced7f0;
	 	 	 width: 400px;
	 	 	 height: 400px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 15px;
	 	 	 box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8);
	 	}
	 	.custom-border {
	 	 	 border: 2px dashed #134ef0;
	 	 	 border-block-width: thick;
	 	 	 padding: 15px;
	 	 	 margin: 10px;
	 	 	 font-size: 22px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="new-container">
<p class="custom-border">A example with border-block-width property with thick 	style</p>
</div>
</body>
</html>

CSS border-block-width - 长度值

以下示例演示了 border-block-width 属性和 length value 的用法。

<html>
<head>
<style>
	 	body {
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 margin: 50px;
	 	 	 padding: 50px;
	 	 	 background-color: #f0f0f0;
	 	}
	 	.new-container {
	 	 	 background-color: #f5f3e1;
	 	 	 width: 400px;
	 	 	 height: 400px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 15px;
	 	 	 box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8);
	 	}
	 	.custom-border {
	 	 	 border: 2px solid #9c9105;
	 	 	 border-block-width: 5px 10px;
	 	 	 padding: 15px;
	 	 	 margin: 10px;
	 	 	 font-size: 20x;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="new-container">
<p class="custom-border">A example with border-block-width property.</p>
</div>
</body>
</html>

CSS border-block-width - 写作模式

以下示例演示了 border-block-style 属性在垂直写入模式下的用法。

<html>
<head>
<style>
	 	.custom-div {
	 	 	 background-color: gray;
	 	 	 width: 450px;
	 	 	 height: 350px;
	 	}
	 	.demo-border {
	 	 	 writing-mode: vertical-rl;
	 	 	 border: 1px solid blue;
	 	 	 border-block-width: 5px;	
	 	 	 padding: 15px;
	 	 	 margin: 10px;
	 	 	 color: #fff;
	 	 	 font-size: 22px;
	 	}
</style>
</head>
<body>
<div class="custom-div">
<p class="demo-border">This is a example with border-block-width property.</p>
</div>
</body>
</html>

<< CSS - border-block-style 属性 CSS - border-bottom 属性 >>