CSS 属性 border-inline-end-color 指定元素逻辑内联结束边框的颜色，然后根据书写模式、方向和文本方向将该颜色转换为元素的物理边框颜色。
这是实际的映射，具体取决于 writing-mode、direction和text-orientation 指定的值，对应于诸如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">带有 css 属性 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">使用 RGB 值的 css 属性 border-inline-end-color 的示例。</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">使用 RGBA 值的 css 属性 border-inline-end-color 的示例。</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">使用 HSL 值的 css 属性 border-inline-end-color 的示例。</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">使用 HSLA 值的 css 属性 border-inline-end-color 的示例。</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">使用 HSLA 值的 css 属性 border-inline-end-color 的示例。</p>
</div>
</body>
</html> CSS border-inline-end-color: 书写模式
以下示例演示了在垂直书写模式下使用 border-inline-end-color 属性。
<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">border-inline-end-color 和书写模式示例：vertical-rl。</p>
</div>
</body>
</html>