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

CSS border-block-end 属性是一个速记属性，它提供了一种简单的方法来设置单个样式表中所有逻辑块端边框属性的值，例如 border-block-end-width、border-block-end-style 和 border-block-end-color。该属性受写入模式的影响。

语法

border-block-end: border-block-end-width border-block-end-style border-block-end-color|initial|inherit;

属性值

值	描述
border-block-end-width	指定元素在块方向上的末端边框的宽度。默认值为 medium。
border-block-end-style	指定元素在块方向上的末端边框的样式。默认值为 none。
border-block-end-color	指定元素在块方向上末端边框的颜色。默认值为边框的当前颜色。
initial	将该属性设置为其默认值。
inherit	将继承父元素的属性。

CSS border-block-end 属性的示例

以下示例说明了具有不同值的 border-block-end 属性。

设置border-block-end

要一次设置 border-block-end-width、border-block-end-style 和 border-block-end-color 的所有值，我们使用 border-block-end 属性。所有值都将在一个声明中定义。在以下示例中，使用了 10px 宽度、双重样式和蓝色。

	 		
<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 #color {
	 	 	 	 	 	 border: 1px solid black;
	 	 	 	 	 	 width: 300px;
	 	 	 	 	 	 padding: 60px;
	 	 	 	 	 	 border-block-end: 10px double blue;
	 	 	 	 }
	 	 </style>
</head>

<body>

	 	 <h2>
	 	 	 	 CSS border-block-end Property
	 	 </h2>

	 	 <p id="color">
	 	 	 	 This shows the border block end 	property	
	 	 	 	 where all values have been set at once. Width-10px,
	 	 	 	 style-double,color-blue
	 	 </p>
</body>

</html>

border-block-end 的替换特性

border-block-end 属性是 border-block-end-width、border-block-end-style 和 border-block-end-color 的组合。以下示例演示了这些单独的属性如何协同工作以显示 border-block-end 效果。

	 		
<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .box {
	 	 	 	 	 	 border: 1px solid black;
	 	 	 	 	 	 padding: 10%;
	 	 	 	 	 	 border-block-end-width: 5px;
	 	 	 	 	 	 border-block-end-style: solid;
	 	 	 	 	 	 border-block-end-color: blue;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>
	 	 	 	 CSS border-block-end Property
	 	 </h2>
	 	 <p class="box">
	 	 	 	 This is how border-block-end property	
	 	 	 	 works. It is a combination of border-block-end-width,
	 	 	 	 border-block-end-style and border-block-end-color.
	 	 </p>
</body>

</html>

</html>

在写入模式下设置border-block-end

border-block-end 属性受写入模式的影响，写入模式决定了边框的方向。水平模式会影响顶部和底部边框，而垂直模式会影响左侧和右侧边框。以下示例显示了这些内容。

	 		
<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 #horizontal {
	 	 	 	 	 	 border: 1px solid black;
	 	 	 	 	 	 width: 300px;
	 	 	 	 	 	 padding: 40px;
	 	 	 	 	 	 writing-mode: horizontal-tb;
	 	 	 	 	 	 border-block-end: 6px solid black;

	 	 	 	 }

	 	 	 	 #vertical {
	 	 	 	 	 	 border: 1px solid black;
	 	 	 	 	 	 height: 500px;
	 	 	 	 	 	 padding: 40px;
	 	 	 	 	 	 writing-mode: vertical-lr;
	 	 	 	 	 	 border-block-end: 6px solid black;

	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>
	 	 	 	 CSS border-block-end Property
	 	 </h2>
	 	 <p id="horizontal">
	 	 	 	 This shows the border block end with horizontal	
	 	 	 	 writing mode.
	 	 </p>
	 	 <p id="vertical">
	 	 	 	 This shows the border block end with	
	 	 	 	 vertical writing mode.
	 	 </p>
</body>

</html>

支持的浏览器

属性
border-block-end	69.0	79.0	41.0	12.1	56.0

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