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

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

它是实际映射，具体取决于为书写模式、方向和文本方向给出的值，对应于 border-top-color、border-right-color、border-bottom-color 或 border-left-color 等属性。

可能的值

color - 边框的颜色。

语法

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

适用于

所有 HTML 元素。

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

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

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: lightcyan;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	}
	 	.custom-border {
	 	 	 border: 5px solid #e74c3c;
	 	 	 border-inline-end-color: #3498db;
	 	 	 border-inline-end-style: dashed;
	 	 	 border-inline-end-width: 10px;
	 	 	 border-inline-end-color: lightgreen;
	 	 	 padding: 12px;
	 	 	 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-end-color.</p>
</div>
</body>
</html>

CSS border-inline-end-color - 使用 RGB 颜色

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

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: lightcyan;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	}
	 	.custom-border {
	 	 	 border: 5px solid #e74c3c;
	 	 	 border-inline-end-style: dashed;
	 	 	 border-inline-end-width: 10px;
	 	 	 border-inline-end-color: rgb(52, 152, 219);	
	 	 	 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-end-color using RGB values.</p>
</div>
</body>
</html>

CSS border-inline-end-color - 使用 RGBA 颜色

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

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: lightcyan;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	}
	 	.custom-border {
	 	 	 border: 5px solid #e74c3c;
	 	 	 border-inline-end-style: solid;
	 	 	 border-inline-end-width: 10px;
	 	 	 border-inline-end-color: rgba(125, 20, 150, 0.8);	
	 	 	 padding: 12px;
	 	 	 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-end-color using RGBA values.</p>
</div>
</body>
</html>

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

以下示例演示了 border-inline-end-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 #e74c3c;
	 	 	 border-inline-end-style: dashed;
	 	 	 border-inline-end-width: 10px;
	 	 	 border-inline-end-color: hsl(120, 70%, 50%);	
	 	 	 padding: 12px;
	 	 	 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-end-color using HSL values.</p>
</div>
</body>
</html>

CSS border-inline-end-color - 使用 HSLA 颜色。

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

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: lightgrey;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	}
	 	.custom-border {
	 	 	 border: 5px solid #e74c3c;
	 	 	 border-inline-end-style: dashed;
	 	 	 border-inline-end-width: 10px;
	 	 	 border-inline-end-color: hsla(210, 80%, 60%, 0.6);	
	 	 	 padding: 12px;
	 	 	 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-end-color using HSLA value.</p>
</div>
</body>
</html>

CSS border-inline-end-color - 使用透明

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

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: lightblue;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	}
	 	.custom-border {
	 	 	 border: 5px solid #e74c3c;
	 	 	 border-inline-end-color: transparent;	
	 	 	 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-end-color using HSLA value.</p>
</div>
</body>
</html>

CSS border-inline-end-color - 写作模式

以下示例演示了 border-inline-end-color 属性与 veritcal 写入模式的用法。

<html>
<head>
<style>
	 	.custom-container {
	 	 	 background-color: #f0f0f0;
	 	 	 width: 300px;
	 	 	 height: 300px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	}
	 	.unique-border {
	 	 	 writing-mode: vertical-rl;
	 	 	 border: 6px dashed black;
	 	 	 border-inline-end-color: rgb(120, 80, 200, 0.6);
	 	 	 padding: 14px;
	 	 	 text-align: center;
	 	 	 font-family: 'Verdana', sans-serif;
	 	 	 font-size: 18px;
	 	 	 color: #333;
	 	 	 }
</style>
</head>
<body>
<div class="custom-container">
<p class="unique-border">An example border-inline-end-color and writing mode: vertical-rl.</p>
</div>
</body>
</html>

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