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

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

语法

border-block-end-color: color | transparent | initial | inherit;

属性值

值	描述
color	指定边框的颜色。可以使用不同的颜色格式（名称，RGB值，十六进制值，HSL值等）。默认颜色是元素的当前颜色。
transparent	指定边框必须是透明的。
initial	将该属性设置为其默认值。
inherit	将继承父元素的属性。

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

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

border-block-end-color （按颜色名称）

可以使用颜色名称来设置 border-block-end-color 。在以下示例中，紫色用于设置 block-border-end-color。

<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 #named-color {
	 	 	 	 	 	 border: 7px solid black;
	 	 	 	 	 	 border-block-end-color: red;
	 	 	 	 	 	 padding: 15px;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <div>
	 	 	 	 <h2>
	 	 	 	 	 	 CSS border-block-end-color Property
	 	 	 	 </h2>
	 	 	 	 <p id="named-color">
	 	 	 	 	 	 This is a bordered element with	
	 	 	 	 	 	 a specific border-block-end-color	
	 	 	 	 	 	 with named color.
	 	 	 	 </p>
	 	 </div>
</body>

</html>

border-block-end-color （按十六进制值）

border-block-end-color 也可以使用十六进制值进行设置。在以下示例中，十六进制值 #99ff99 已用于设置块边框颜色。

<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 #hexa {
	 	 	 	 	 	 border: 7px solid black;
	 	 	 	 	 	 border-block-end-color: #99ff99;
	 	 	 	 	 	 padding: 15px;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <div>
	 	 	 	 <h2>
	 	 	 	 	 	 CSS border-block-end-color Property
	 	 	 	 </h2>
	 	 	 	 <p id="hexa">
	 	 	 	 	 	 This is a bordered element with	
	 	 	 	 	 	 a specific border-block-end-color	
	 	 	 	 	 	 using hex value.
	 	 	 	 </p>
	 	 </div>
</body>

</html>

按 RGB 值划分的 border-block-end-color

border-block-end-color 也可以使用 rgb 值进行设置。在以下示例中，已使用 rgb 值（204， 204， 0）来设置块边框颜色。

<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 #rgb {
	 	 	 	 	 	 border: 7px solid black;
	 	 	 	 	 	 border-block-end-color:rgb(204, 204, 0);
	 	 	 	 	 	 padding: 15px;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <div>
	 	 	 	 <h2>
	 	 	 	 	 	 CSS border-block-end-color Property
	 	 	 	 </h2>
	 	 	 	 <p id="rgb">
	 	 	 	 	 	 This is a bordered element with	
	 	 	 	 	 	 a specific border-block-end-color
	 	 	 	 	 	 using rgb value.
	 	 	 	 </p>
	 	 </div>
</body>

</html>

按 HSL 值划分的 border-block-end-color

border-block-end-color 也可以使用 hsl 值进行设置。在以下示例中，hsl 值（0， 100%， 66%）用于设置块边框颜色。

<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 #hsl {
	 	 	 	 	 	 border: 7px solid black;
	 	 	 	 	 	 border-block-end-color:hsl(0, 100%, 66%);
	 	 	 	 	 	 padding: 15px;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <div>
	 	 	 	 <h2>
	 	 	 	 	 	 CSS border-block-end-color Property
	 	 	 	 </h2>
	 	 	 	 <p id="hsl">
	 	 	 	 	 	 This is a bordered element with	
	 	 	 	 	 	 a specific border-block-end-color	
	 	 	 	 	 	 using hsl value.
	 	 	 	 </p>
	 	 </div>
</body>

</html>

透明 border-block-end-color

为了设置透明边框块颜色，我们使用透明值。在以下示例中，透明值已用于设置 border-block-end-color 。顶部和底部边框不可见。

<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 #hsl {
	 	 	 	 	 	 border: 7px solid black;
	 	 	 	 	 	 border-block-end-color:transparent;
	 	 	 	 	 	 padding: 15px;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <div>
	 	 	 	 <h2>
	 	 	 	 	 	 CSS border-block-end-color Property
	 	 	 	 </h2>
	 	 	 	 <p id="hsl">
	 	 	 	 	 	 This is a bordered element with	
	 	 	 	 	 	 a specific border-block-end-color	
	 	 	 	 	 	 using transparent value.
	 	 	 	 </p>
	 	 </div>
</body>

</html>

具有写入模式的 border-block-end-color

border-block-color 属性受书写模式的影响，书写模式决定了边框方向。在水平模式下，它为顶部和底部边框着色，而在垂直模式下，它为左边框和右边框着色，如以下示例所示。

<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 #horizontal {
	 	 	 	 	 	 border: 7px solid black;
	 	 	 	 	 	 writing-mode: horizontal-tb;
	 	 	 	 	 	 border-block-end-color: blue;
	 	 	 	 	 	 padding: 20px;
	 	 	 	 }

	 	 	 	 #vertical {
	 	 	 	 	 	 border: 7px solid black;
	 	 	 	 	 	 writing-mode: vertical-rl;
	 	 	 	 	 	 border-block-end-color: blue;
	 	 	 	 	 	 padding: 20px;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <div>
	 	 	 	 <h2>
	 	 	 	 	 	 CSS border-block-end-color Property
	 	 	 	 </h2>
	 	 	 	 <p id="horizontal">
	 	 	 	 	 	 This shows the horizontal coloring of the	
	 	 	 	 	 	 border-block-end-color property.
	 	 	 	 </p>
	 	 	 	 <p id="vertical">
	 	 	 	 	 	 This shows the vertical coloring	
	 	 	 	 	 	 of the border-block-end-color property.
	 	 	 	 </p>
	 	 </div>
</body>

</html>

支持的浏览器

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

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