元素的逻辑内联边框颜色由其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>
