CSS - border-block-end-style 属性_CSS 菜鸟教程

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

<< CSS - border-block-end-color 属性 CSS - border-block-end-width 属性 >>