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

CSS border-block-end-width 属性确定逻辑 block-end 边框宽度，并根据元素的书写模式、方向性和文本方向转换为物理边框宽度。

语法

border-block-end-width: medium | thin | thick | length | initial | inherit;

属性值

值	描述
medium	指定了中等宽度的边框。默认值。
thin	指定一个细边框。
thick	指定一个粗边框。
length	厚度可以用值的形式给出。
initial	将该属性设置为其默认值。
inherit	将继承父元素的属性。

CSS border-block-end-width属性的示例

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

使用边框块端宽的中等边框

为 border-block-end-width 设置一个中等边框，我们使用中等值。在以下示例中，使用了中等值。

<!DOCTYPE html>
<html>

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

<body>
	 	 <h2>
	 	 	 	 CSS border-block-end-width Property
	 	 </h2>
	 	 <p class="box">
	 	 	 	 This shows the border-block-end-width
	 	 	 	 property with medium value.
	 	 </p>
</body>

</html>

使用边框块端宽的细边框

为了为 border-block-end-width 设置一个细边框，我们使用 thin 值。在以下示例中，使用了瘦值。

<!DOCTYPE html>
<html>

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

<body>
	 	 <h2>
	 	 	 	 CSS border-block-end-width Property
	 	 </h2>
	 	 <p class="box">
	 	 	 	 This shows the border-block-end-width
	 	 	 	 property with thin value.
	 	 </p>
</body>

</html>

使用边框块端部宽度的粗边框

为了根据我们的选择为 border-block-end-width 设置粗边框，我们使用粗值。在以下示例中，使用了 thick 值。

<!DOCTYPE html>
<html>

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

<body>
	 	 <h2>
	 	 	 	 CSS border-block-end-width Property
	 	 </h2>
	 	 <p class="box">
	 	 	 	 This shows the border-block-end-width
	 	 	 	 property with thick value.
	 	 </p>
</body>

</html>

使用边框块端宽的自定义边框

为了设置 border-block-end-widths 的边框厚度，我们根据我们的选择指定厚度值。在以下示例中，使用了 20px 的厚度值。

<!DOCTYPE html>
<html>

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

<body>
	 	 <h2>
	 	 	 	 CSS border-block-end-width Property
	 	 </h2>
	 	 <p class="box">
	 	 	 	 This shows the border-block-end-width
	 	 	 	 property with 20px value.
	 	 </p>
</body>

</html>

边框块端部宽度，带书写模式

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

<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 #horizontal {
	 	 	 	 	 	 border: 1px solid black;
	 	 	 	 	 	 padding: 8%;
	 	 	 	 	 	 writing-mode: horizontal-tb;
	 	 	 	 	 	 border-block-end-width: 15px;
	 	 	 	 }

	 	 	 	 #vertical {
	 	 	 	 	 	 border: 1px solid black;
	 	 	 	 	 	 padding: 8%;
	 	 	 	 	 	 writing-mode: vertical-rl;
	 	 	 	 	 	 border-block-end-width: 15px;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>
	 	 	 	 CSS border-block-end-width Property
	 	 </h2>
	 	 <p id="horizontal">
	 	 	 	 This shows the border-block-end-width property
	 	 	 	 with 15px value in horizontal mode.
	 	 </p>
	 	 <p id="vertical">
	 	 	 	 This shows the border-block-end-width property
	 	 	 	 with 15px value in vertical mode.
	 	 </p>
</body>

</html>

支持的浏览器

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

<< CSS - border-block-end-style 属性 CSS - border-block-start 属性 >>