CSS border-block-end-style 属性用于定义逻辑 block-end 边框样式，并根据元素的书写模式、方向性和文本方向转换为物理边框样式。
语法
border-block-end-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;
属性值
| 值 | 描述 |
|---|---|
| none | 不指定边界。默认值。 |
| hidden | 与 none 类似，除了在解决表元素的边界冲突方面。 |
| dotted | 指定一个虚线边框。 |
| dashed | 指定一个虚线边框。 |
| solid | 指定一个实心边框。 |
| double | 指定了双边框。 |
| groove | 指定 3D 凹槽边框。效果取决于边框颜色值。 |
| ridge | 指定 3D 脊状边界。效果取决于边框颜色值。 |
| inset | 指定 3D 插入边框。效果取决于边框颜色值。 |
| outset | 指定 3D 出线边界。效果取决于边框颜色值。 |
| inherit | 将继承父元素的属性。 |
CSS border-block-end-style属性的示例
以下示例说明了具有不同值的 border-block-end-style 属性。
将无边框设置为border-block-end-style
为了避免在边框块端出现边框，我们使用 none 值。在以下示例中，未将任何值与 border-block-end-style 属性一起使用。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 2px solid black;
padding: 10%;
border-block-end-style: none;
}
</style>
</head>
<body>
<h2>
CSS border-block-end-style Property
</h2>
<p class="box">
This shows the border-block-end-style
property with none value.
</p>
</body>
</html>
隐藏border-block-end-style
为了在块端设置隐藏边框，我们使用隐藏值。这使得边界占据空间，但保持不可见。下面的示例显示了此效果，红色指示线突出显示了隐藏的边界。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
padding: 10%;
border: 2px solid black;
position: relative;
margin-bottom: 20px;
}
.none {
border-block-end-width: 5px;
border-block-end-style: none;
border-block-end-color: transparent;
}
.hidden {
border-block-end-width: 5px;
border-block-end-style: hidden;
border-block-end-color: transparent;
}
.indicator {
background-color: red;
height: 5px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.show-indicator .indicator {
display: block;
}
</style>
</head>
<body>
<h2>CSS border-block-end-style property</h2>
<div class="container none">
Border Block End Style: none
</div>
<div class="container hidden show-indicator">
Border Block End Style: hidden
<div class="indicator"></div>
</div>
</body>
</html>
虚线border-block-end-style
为了在边界块端有一个虚线边框，我们使用虚线值。在以下示例中，虚线值已与 border-block-end-style 属性一起使用。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 4px solid black;
padding: 10%;
border-block-end-style: dotted;
}
</style>
</head>
<body>
<h2>
CSS border-block-end-style Property
</h2>
<p class="box">
This shows the border-block-end-style
property with dotted value.
</p>
</body>
</html>
虚线border-block-end-style
为了在边框块端有一个虚线边框，我们使用虚线值。在以下示例中，虚线值已与 border-block-end-style 属性一起使用。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 4px solid black;
padding: 10%;
border-block-end-style: dashed;
}
</style>
</head>
<body>
<h2>
CSS border-block-end-style Property
</h2>
<p class="box">
This shows the border-block-end-style
property with dashed value.
</p>
</body>
</html>
实心border-block-end-style
为了在边界块端有一个实心边框，我们使用实心值。在以下示例中，solid value 已与 border-block-end-style 属性一起使用。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 4px solid black;
padding: 10%;
border-block-end-style: solid;
}
</style>
</head>
<body>
<h2>
CSS border-block-end-style Property
</h2>
<p class="box">
This shows the border-block-end-style
property with solid value.
</p>
</body>
</html>
双边框到border-block-end-style
为了在边框块端有一个双边框，我们使用 double 值。在以下示例中，double 值已与 border-block-end-style 属性一起使用。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 6px solid black;
padding: 10%;
border-block-end-style: double;
}
</style>
</head>
<body>
<h2>
CSS border-block-end-style Property
</h2>
<p class="box">
This shows the border-block-end-style
property with double value.
</p>
</body>
</html>
凹槽、边框、块、端部样式
为了在边界块端有一个 3D 凹槽边界，我们使用凹槽值。此效果取决于边框颜色。在以下示例中，groove 值已与带有红色边框颜色的 border-block-end-style 属性一起使用。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 15px solid red;
padding: 10%;
border-block-end-style: groove;
}
</style>
</head>
<body>
<h2>
CSS border-block-end-style Property
</h2>
<p class="box">
This shows the border-block-end-style
property with groove value.
</p>
</body>
</html>
Ridge Border Block End 样式
为了在边界块端有一个 3D 脊状边界，我们使用脊值。此效果取决于边框颜色。在以下示例中，ridge 值已与带有黄色边框颜色的 border-block-end-style 属性一起使用。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 15px solid yellow;
padding: 10%;
border-block-end-style: ridge;
}
</style>
</head>
<body>
<h2>
CSS border-block-end-style Property
</h2>
<p class="box">
This shows the border-block-end-style
property with ridge value.
</p>
</body>
</html>
插入border-block-end-style
为了在边框块端有一个 3D 插入边框，我们使用插入值。此效果取决于边框颜色。在以下示例中，inset 值已与带有橙色边框颜色的 border-block-end-style 属性一起使用。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 15px solid orange;
padding: 10%;
border-block-end-style: inset;
}
</style>
</head>
<body>
<h2>
CSS border-block-end-style Property
</h2>
<p class="box">
This shows the border-block-end-style
property with inset value.
</p>
</body>
</html>
Outset Border Block End 样式
为了在边界块端有一个 3D 出线边界，我们使用出线值。此效果取决于边框颜色。在以下示例中，out 值已与带有绿色边框颜色的 border-block-end-style 属性一起使用。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 20px solid green;
padding: 10%;
border-block-end-style: outset;
}
</style>
</head>
<body>
<h2>CSS border-block-end-style property</h2>
<p class="box">
This shows the border-block-end-style
property with outset value.
</p>
</body>
</html>
支持的浏览器
| 属性 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| border-block-end-style | 69.0 | 79.0 | 41.0 | 12.1 | 56.0 |
