CSS - border-inline-start-color 属性

CSS 属性 border-inline-start-color 指定元素的逻辑内联开始边框的颜色。然后，根据元素的书写模式、方向性和文本方向，将此颜色转换为物理边框颜色。

如果提供了 writing-mode、direction 和 text-orientation 的值，则它对应于 border-top-color、border-right-color、border-bottom-color 或 border-left-color 等属性。
元素的各种边框的颜色由属性 border-block-start-color、border-block-end-color 和 border-inline-end-color 确定，这些属性链接到 border-inline-start-color。

可能的值

<color> - 边框的颜色。

语法


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

适用于

所有 HTML 元素。

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

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


<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #cfa3a3;
	 	 	 width: 350px;
	 	 	 height: 250px;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	}
	 	.custom-box {
	 	 	 border: 8px double #7d1010;
	 	 	 border-inline-start-color: #f50f0f;
	 	 	 padding: 12px;
	 	 	 margin: 10px 10px;
	 	 	 text-align: center;
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 font-size: 20px;
	 	 	 color: #2c3e50;
	 	}
</style>
</head>
<body>
<div class="container">
<p class="custom-box">A example with CSS property border-inline-start-color.</p>
</div>
</body>
</html>

CSS border-inline-start-color - 使用命名颜色。

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


<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #f5f1a9;
	 	 	 width: 350px;
	 	 	 height: 250px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	}
	 	.custom-box {
	 	 	 border: 8px double #7d1010;
	 	 	 border-inline-start-color: blue;
	 	 	 padding: 12px;
	 	 	 margin: 10px;
	 	 	 text-align: center;
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 font-size: 22px;
	 	 	 color: #2c3e50;
	 	}
</style>
</head>
<body>
<div class="container">
<p class="custom-box">A example with CSS property border-inline-start-color.</p>
</div>
</body>
</html>

CSS border-inline-start-color - 使用 RGB 颜色。

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


<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #f5f1a9;
	 	 	 width: 350px;
	 	 	 height: 250px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	}
	 	.custom-box {
	 	 	 border: 8px double red;	
	 	 	 border-inline-start-color: rgb(33, 150, 243) ;
	 	 	 padding: 12px;
	 	 	 margin: 10px;
	 	 	 text-align: center;
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 font-size: 22px;
	 	 	 color: #2c3e50;
	 	}
</style>
</head>
<body>
<div class="container">
<p class="custom-box">An example with CSS property border-inline-start-color and RGB color value.</p>
</div>
</body>
</html>

CSS border-inline-start-color - 使用 HSL 颜色。

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


<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #d0f1f5;
	 	 	 width: 350px;
	 	 	 height: 250px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	}
	 	.custom-box {
	 	 	 border: 8px double gray;	
	 	 	 border-inline-start-color: hsl(210, 80%, 50%);
	 	 	 padding: 12px;
	 	 	 margin: 10px;
	 	 	 text-align: center;
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 font-size: 22px;
	 	 	 color: #2c3e50;
	 	}
</style>
</head>
<body>
<div class="container">
<p class="custom-box">An example with CSS property border-inline-start-color and HSL color value.</p>
</div>
</body>
</html>

CSS border-inline-start-color - 使用 RGBA 颜色。

以下示例演示了 border-inline-start-color CSS 属性与 veritcal 写入模式和 rgba 颜色值的用法。


<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #c2d9f0;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 10px;
	 	 	 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	 	}
	 	.text-box {
	 	 	 writing-mode: vertical-rl;
	 	 	 border: 9px double #146cc4;
	 	 	 border-inline-start-color: rgba(233, 171, 13, 0.8);
	 	 	 padding: 15px;
	 	 	 margin: 10px 10px;
	 	 	 text-align: center;
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 font-size: 18px;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="container">
<p class="text-box">An example which shows CSS property border-inline-start-color with veritcal writing mode.</p>
</div>
</body>
</html>

本页