逻辑块边框的宽度由 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>
