CSS - border-block-start-width 属性

元素的逻辑块开始边界宽度由 CSS border-block-start-width 属性指定，该属性根据元素的写入模式、方向性和文本方向转换为物理边界宽度。

根据输入的书写模式、方向和文本方向值，它可以与 border-top-width、border-right-width、border-bottom-width 或 border-left-width 一起使用。

可能的值

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

语法


border-block-start-width = <line-width>
<line-width> = <length [0,∞]> | thin | medium | thick

适用于

所有 HTML 元素。

CSS border-block-start-width - 长度值

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


<html>
<head>
<style>
	 	body {
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 margin: 50px;
	 	 	 padding: 50px;
	 	 	 background-color: #f0f0f0;
	 	}
	 	.new-container {
	 	 	 background-color: #ffd700;
	 	 	 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-start-style: ridge;
	 	 	 border-block-start-width: 10px;
	 	 	 padding: 15px;
	 	 	 margin: 10px;
	 	 	 font-size: 22px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="new-container">
<p class="custom-border">A border-block-start-width example</p>
</div>
</body>
</html>

CSS border-block-start-width - 瘦值

以下示例演示了 border-block-start-width 属性与薄宽度值的用法。


<html>
<head>
<style>
	 	body {
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 margin: 50px;
	 	 	 padding: 50px;
	 	 	 background-color: #f0f0f0;
	 	}
	 	.new-container {
	 	 	 background-color: #a6d1ed;
	 	 	 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-start-style: solid;
	 	 	 border-block-start-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-start-width property with thin style</p>
</div>
</body>
</html>

CSS border-block-start-width - 中等值

以下示例演示了 border-block-start-width 属性与中等宽度值的用法。


<html>
<head>
<style>
	 	body {
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 margin: 50px;
	 	 	 padding: 50px;
	 	 	 background-color: #f0f0f0;
	 	}
	 	.new-container {
	 	 	 background-color: #a6d1ed;
	 	 	 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 #034673;
	 	 	 border-block-start-style: solid;
	 	 	 border-block-start-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-start-width property with medium style</p>
</div>
</body>
</html>

CSS border-block-start-width - 厚值

以下示例演示了 border-block-start-width 属性与厚宽度值的用法。


<html>
<head>
<style>
	 	body {
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 margin: 50px;
	 	 	 padding: 50px;
	 	 	 background-color: #f0f0f0;
	 	}
	 	.new-container {
	 	 	 background-color: #d8f0d3;
	 	 	 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 #1d8a07;
	 	 	 border-block-start-style: solid;
	 	 	 border-block-start-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-start-width property with thick style.</p>
</div>
</body>
</html>

CSS border-block-start-width - 写作模式

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


<html>
<head>
<style>
	 	body {
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 margin: 50px;
	 	 	 padding: 50px;
	 	 	 background-color: #f0f0f0;
	 	}
	 	.vertical-container {
	 	 	 background-color: #87cefa;
	 	 	 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);
	 	}
	 	.vertical-border {
	 	 	 writing-mode: vertical-rl;
	 	 	 border: 3px solid #475861;
	 	 	 border-block-start-style: dotted;
	 	 	 border-block-start-width: 6px;
	 	 	 padding: 12px;
	 	 	 margin: 10px;
	 	 	 font-size: 20px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="vertical-container">
<p class="vertical-border">A border-block-start-width example with vertical writing mode.</p>
</div>
</body>
</html>

本页