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>
