CSS - border-block-start-color 属性

元素的逻辑块开始边框颜色由 border-block-start-color CSS 属性指定;元素的书写模式、方向性和文本方向决定了实际的物理边框颜色。

根据为元素的书写模式、方向和文本方向提供的值，其行为对应于 border-top-color、border-right-color、border-bottom-color 或 border-left-color。

可能的值

<color> - 边框的颜色。

语法


border-block-start-color = <color> | <image-1D>

适用于

所有 HTML 元素。

CSS border-block-start-color - 使用十六进制颜色

以下示例演示了 border-block-start-color 属性与十六进制颜色值的用法。


<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #098f07;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 20px;
	 	}
	 	.demo-border {
	 	 	 writing-mode: horizontal-tb;
	 	 	 border: 8px dashed #111211;
	 	 	 border-block-start-color: #e4f0e4;
	 	 	 padding: 15px;
	 	 	 margin: 10px;
	 	 	 text-align: center;
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 font-size: 20px;
	 	 	 color: #f5f4f0;
}
</style>
</head>
<body>
<div class="container">
<p class="demo-border">A example with border-block-start-color property.</p>
</div>
</body>
</html>

CSS border-block-start-color - 使用 RGB 颜色

以下示例演示了 border-block-start-color 属性与 RGB 颜色值的用法。


<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #098f07;
	 	 	 width: 450px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 20px;
	 	}
	 	.demo-border {
	 	 	 writing-mode: horizontal-tb;
	 	 	 border: 8px dashed #111211;
	 	 	 border-block-start-color: rgb(10, 150, 250);	
	 	 	 padding: 15px;
	 	 	 margin: 15px;
	 	 	 text-align: center;
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 font-size: 25px;
	 	 	 color: #f5f4f0;
	 	}
</style>
</head>
<body>
<div class="container">
	 	<p class="demo-border">An example with border-block-start-color property.</p>
</div>
</body>
</html>

CSS border-block-start-color - 使用 HSL 颜色

以下示例演示了 border-block-start-color 属性与 HSL 颜色值的用法。


<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #098f07;
	 	 	 width: 450px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 20px;
	 	}
	 	.demo-border {
	 	 	 writing-mode: horizontal-tb;
	 	 	 border: 8px dashed #111211;
	 	 	 border-block-start-color: hsl(120, 70%, 50%);	
	 	 	 padding: 15px;
	 	 	 margin: 15px;
	 	 	 text-align: center;
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 font-size: 25px;
	 	 	 color: #f5f4f0;
	 	}
</style>
</head>
<body>
<div class="container">
	 	<p class="demo-border">An example with border-block-start-color property.</p>
</div>
</body>
</html>

CSS border-block-start-color - 使用命名颜色

以下示例演示了 border-block-start-color 属性与命名颜色值的用法。


<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #098f07;
	 	 	 width: 450px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 20px;
	 	}
	 	.demo-border {
	 	 	 writing-mode: horizontal-tb;
	 	 	 border: 8px dashed #111211;
	 	 	 border-block-start-color: lightgrey;	
	 	 	 padding: 15px;
	 	 	 margin: 15px;
	 	 	 text-align: center;
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 font-size: 25px;
	 	 	 color: #f5f4f0;
	 	}
</style>
</head>
<body>
<div class="container">
	 	<p class="demo-border">An example with border-block-start-color property.</p>
</div>
</body>
</html>

CSS border-block-start-color - 使用 RGBA 颜色

以下示例演示了 border-block-start-color 属性在垂直写入模式和 RGBA 颜色值中的用法。


<html>
<head>
<style>
	 	.custom-container {
	 	 	 background-color: #2c3e50;
	 	 	 width: 300px;
	 	 	 height: 400px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 15px;
	 	}
	 	.demo-block {
	 	 	 writing-mode: vertical-rl;
	 	 	 border: 6px double #3498db;
	 	 	 border-block-start-color: rgba(120, 180, 50, 0.8);
	 	 	 padding: 12px;
	 	 	 text-align: center;
	 	 	 font-family: 'Verdana', sans-serif;
	 	 	 font-size: 25px;
	 	 	 color: #ecf0f1;
}
</style>
</head>
<body>
<div class="custom-container">
<p class="demo-block">An example of border-block-start-color property with vertical text.</p>
</div>
</body>
</html>

打印本页