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

CSS border-block-color 属性用于指定元素的逻辑块边框的颜色。该属性根据书写模式、方向性和文本方向应用于物理边界。

语法

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

属性值

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

CSS border-block-color颜色属性的示例

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

按颜色名称划分的border-block-color颜色

可以使用颜色名称来设置边框块的颜色。在以下示例中，已使用红色来设置块边框颜色。

<!DOCTYPE html>
<html>

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

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

</html>

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

边框块的颜色也可以使用十六进制值进行设置。在以下示例中，十六进制值 #9999ff 已用于设置块边框颜色。

<!DOCTYPE html>
<html>

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

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

</html>

按 RGB 值划分的border-block-color颜色

边框块的颜色也可以使用 rgb 值进行设置。在以下示例中，已使用 rgb 值（204,102,255）来设置块边框颜色。

<!DOCTYPE html>
<html>

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

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

</html>

按 HSL 值划分的border-block-color颜色

边框块的颜色也可以使用 hsl 值进行设置。在以下示例中，已使用 hsl 值（40、100%、70%）来设置块边框颜色。

<!DOCTYPE html>
<html>

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

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

</html>

透明border-block-color颜色

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

<!DOCTYPE html>
<html>

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

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

</html>

不同的 border-block 颜色与border-block-color颜色

要设置不同的 border-block-color 颜色，我们可以为 border-block-color 属性指定两种不同的颜色。第一种颜色应用于第一边框，第二种颜色应用于第二边框。在以下示例中，橙色和棕色与 border-block-color 一起使用。

<!DOCTYPE html>
<html>

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

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

</html>

具有写入模式的border-block-color颜色

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

<!DOCTYPE html>
<html>

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

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

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

</html>

支持的浏览器

属性
border-block-color	87.0	87.0	66.0	14.1	73.0

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