CSS border-inline-color - 易学教程，面试笔记经验！

元素的逻辑内联边框颜色由其 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 属性与十六进制颜色值的用法。

<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">带有 css 属性 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">使用 RGB 值的 css 属性 border-inline-color 的示例。</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">使用 RGBA 值的 css 属性 border-inline-color 的示例。</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">使用 HSL 值的 css 属性 border-inline-color 的示例。</p>
</div>
</body>
</html>

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

以下示例演示border-inline-color 属性的使用以及命名颜色值和垂直书写模式。

<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">使用命名值和垂直书写模式的 CSS 属性 border-inline-color 的示例。</p>
</div>
</body>
</html>