元素的逻辑块端边框宽度由 border-block-end-width CSS 属性设置，该属性根据元素的书写模式、方向性和文本方向调整为物理边框宽度。
其值取决于writing-mode、direction 和 text-orientation ，被解释为 border-right-width，border-bottom-width，或 border-left-width
元素的剩余边框宽度由相关属性 border-block-start-width、border-inline-start-width 和 border-inline-end-width 定义。
属性值
<'border-width'>: 边框的宽度。
语法
border-block-end-width = <line-width>
<line-width> = <length [0,∞]> | thin | medium | thick 适用范围
所有 HTML 元素。
CSS border-block-end-width: length
下面的示例演示了 border-block-end-width: 长度属性的用法。
<html>
<head>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 50px;
padding: 50px;
background-color: #f0f0f0;
}
.new-container {
background-color: #d6e39f;
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 #637804;
border-block-end-style: solid;
border-block-end-width: 10px;
padding: 15px;
margin: 10px;
font-size: 20px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<div class="new-container">
<p class="custom-border">带有长度值的 border-block-end-width 属性示例。</p>
</div>
</body>
</html> CSS border-block-end-width: Thin 值。
以下示例演示了 border-block-end-width 属性与 Thin 的用法。
<html>
<head>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 50px;
padding: 50px;
background-color: #f0f0f0;
}
.new-container {
background-color: #f0ccc5;
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 double #e6350e;
border-block-end-style: solid;
border-block-end-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">具有thin值的 border-block-end-width 示例。</p>
</div>
</body>
</html> CSS border-block-end-width: medium值
以下示例演示了 border-block-end-width 属性与medium值的用法。
<html>
<head>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 50px;
padding: 50px;
background-color: #f0f0f0;
}
.new-container {
background-color: #b8e2f5;
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: 8px double #02a0e3;
border-block-end-style: solid;
border-block-end-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">具有medium值的 border-block-end-width 示例。</p>
</div>
</body>
</html> CSS border-block-end-width: thick值
以下示例演示了 border-block-end-width 属性与thick值的用法。
<html>
<head>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 50px;
padding: 50px;
background-color: #f0f0f0;
}
.new-container {
background-color: #b8e2f5;
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-block-end-style: solid;
border-block-end-width: thick;
border-block-end-color: #02a0e3;
padding: 15px;
margin: 10px;
font-size: 22px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<div class="new-container">
<p class="custom-border">具有thick值的 border-block-end-width 示例。</p>
</div>
</body>
</html> CSS border-block-end-width: 书写模式
以下示例演示了 border-block-end-width 属性以及长度值和垂直书写模式的用法。
<html>
<head>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 50px;
padding: 50px;
background-color: #f0f0f0;
}
.vertical-container {
background-color: #eaf5d7;
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 #854905;
border-block-end-style: dotted;
border-block-end-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">垂直书写模式的 border-block-end-width 示例。</p>
</div>
</body>
</html>