元素的逻辑块开始边界宽度由 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>
