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

元素的逻辑内联边框颜色由其CSS border-inline-color 属性指定;元素的书写模式、方向性和文本方向决定了实际的边框颜色。

根据为 writing-mode、direction 和 text-orientation 提供的值，此属性与顶部和底部边框或左右边框相关。
使用 border-block-color 设置 border-block-start-color 和 border-block-end-color，可以在相反的维度上调整边框颜色。

可能的值

color - 边框的颜色。

语法

border-inline-color = <'border-inline-color'> {1,2}

适用于

所有 HTML 元素。

CSS border-inline-color - 使用十六进制值

以下示例演示了 border-inline-color 属性以及 HEX 颜色值的用法。

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #cdfad9;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	}
	 	.custom-border {
	 	 	 border: 5px solid lightgrey;
	 	 	 border-inline-color: #048526;
	 	 	 border-inline-style: dashed;
	 	 	 border-inline-width: 10px;
	 	 	 padding: 12px;
	 	 	 margin: 10px;
	 	 	 text-align: center;
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 font-size: 20px;
	 	 	 color: #2c3e50;
	 	}
</style>
</head>
<body>
<div class="container">
<p class="custom-border">A example with css property border-inline-color.</p>
</div>
</body>
</html>

CSS border-inline-color - 使用 RGB 值

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

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #faf9d9;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	}
	 	.custom-border {
	 	 	 border: 5px solid #e74c3c;
	 	 	 border-inline-style: solid;
	 	 	 border-inline-width: 10px;
	 	 	 border-inline-color: rgb(209, 203, 4);	
	 	 	 padding: 12px;
	 	 	 margin: 10px;
	 	 	 text-align: center;
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 font-size: 20px;
	 	 	 color: #2c3e50;
	 	}
</style>
</head>
<body>
<div class="container">
<p class="custom-border">An example with css property border-inline-color using RGB values.</p>
</div>
</body>
</html>

CSS border-inline-color - 使用 RGBA 值

以下示例演示了 border-inline-color 属性以及 RGBA 颜色值的用法。

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #f2b6ef;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	}
	 	.custom-border {
	 	 	 border: 5px solid white;
	 	 	 border-inline-style: solid;
	 	 	 border-inline-width: 10px;
	 	 	 border-inline-color: rgba(203, 10, 109, 0.8);	
	 	 	 padding: 12px;
	 	 	 margin: 10px;
	 	 	 text-align: center;
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 font-size: 20px;
	 	 	 color: #2c3e50;
	 	}
</style>
</head>
<body>
<div class="container">
<p class="custom-border">An example with css property border-inline-color using RGBA values.</p>
</div>
</body>
</html>

CSS border-inline-color - 使用 HSL 值

以下示例演示了 border-inline-color 属性以及 HSL 颜色值的用法。

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: lightcyan;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	}
	 	.custom-border {
	 	 	 border: 5px solid blue;
	 	 	 border-inline-style: double;
	 	 	 border-inline-width: 10px;
	 	 	 border-inline-color: hsl(120, 70%, 50%);	
	 	 	 padding: 12px;
	 	 	 margin: 10px;
	 	 	 text-align: center;
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 font-size: 20px;
	 	 	 color: #2c3e50;
	 	}
</style>
</head>
<body>
<div class="container">
<p class="custom-border">An example with css property border-inline-color using HSL values.</p>
</div>
</body>
</html>

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

以下示例演示了 border-inline-color 属性以及命名颜色值和 veritcal 写入模式的用法。

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #f2ebc9;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	}
	 	.custom-border {
	 	 writing-mode: vertical-rl;
	 	 	 border: 5px solid #a6890c;
	 	 	 border-inline-style: double;
	 	 	 border-inline-width: 10px;
	 	 	 border-inline-color: red;	
	 	 	 padding: 12px;
	 	 	 margin: 10px;
	 	 	 text-align: center;
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 font-size: 20px;
	 	 	 color: #2c3e50;
	 	}
</style>
</head>
<body>
<div class="container">
<p class="custom-border">An example with css property border-inline-color using named value and vertical writing mode.</p>
</div>
</body>
</html>

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