CSS - border-inline-color 属性

上一页
下一页

CSS border-inline-color 属性指定元素的逻辑内联边框颜色；元素的书写模式、方向性和文本方向决定实际的边框颜色。

语法

border-inline-color: color | transparent | initial | inherit;

属性值

值 描述
color 它指定边框的颜色。可以使用不同的颜色格式（名称、rgb 值、十六进制值、hsl 值等）。默认颜色为元素的当前颜色。
transparent 它指定边框必须是透明的。
initial 这将属性设置为其默认值。
inherit 这从父元素继承属性。

CSS 内联边框颜色属性示例

以下示例使用不同的值解释了 border-inline-color 属性。

使用颜色名称的内联边框颜色属性

可以使用颜色名称（例如红色、蓝色等）设置内联边框颜色。指定的颜色将应用于边框。在以下示例中，颜色名称已用于边框。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: #f2ebc9;
         padding: 20px;
         width: 350px;
         height: 250px;
         display: block;
         text-align: center;
         justify-content: center;
      }

      .borders {
         padding: 12px;
         border: 4px solid #a6890c;
         border-inline-style: double;
         border-inline-width: 10px;
      }

      .border1 {
         border-inline-color: red;
      }

      .border2 {
         border-inline-color: green;
      }
      .border3{
         border-inline-color: blue purple;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has 'red' border-inline-color
      </p>
      <p class="borders border2">
         This border has 'green' border-inline-color
      </p>
      <p class="borders border3">
         This border has 'blue-purple' 
         border-inline-colors
      </p>
   </div>
</body>

</html>

使用十六进制值的内联边框颜色属性

可以使用十六进制值（例如 #ff0000）设置内联边框颜色。指定的颜色将应用于边框。在以下示例中，十六进制值已用于边框。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: #f2ebc9;
         padding: 20px;
         width: 350px;
         height: 250px;
         display: block;
         text-align: center;
         justify-content: center;
      }

      .borders {
         padding: 12px;
         border: 4px solid #a6890c;
         border-inline-style: double;
         border-inline-width: 10px;
      }

      .border1 {
         border-inline-color: #ffaa00;
      }

      .border2 {
         border-inline-color: #ff3333;
      }
      .border3{
         border-inline-color: #66ff33 #333300;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has '#ffaa00' value border-inline-color
      </p>
      <p class="borders border2">
         This border has '#ff3333' value border-inline-color
      </p>
      <p class="borders border3">
         This border has '#66ff33 #333300'
          values border-inline-color
      </p>
   </div>
</body>

</html>

使用 RGB 值的内联边框颜色属性

可以使用 rgb 值（例如 rgb(255, 0, 0)）设置内联边框颜色。指定的颜色将应用于边框。在以下示例中，rgb 值已用于边框。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: #f2ebc9;
         padding: 20px;
         width: 350px;
         height: 250px;
         display: block;
         text-align: center;
         justify-content: center;
      }

      .borders {
         padding: 12px;
         border: 4px solid #a6890c;
         border-inline-style: double;
         border-inline-width: 10px;
      }

      .border1 {
         border-inline-color: rgb(0, 0, 179);
      }

      .border2 {
         border-inline-color: rgb(0, 153, 77);
      }
      .border3{
         border-inline-color: rgb(153, 102, 255) 
                              rgb(255, 153, 0);
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has 'rgb(0, 0, 179)' value 
      border-inline-color
      </p>
      <p class="borders border2">
         This border has 'rgb(0, 153, 77)' value 
         border-inline-color
      </p>
      <p class="borders border3">
         This border has 'rgb(153, 102, 255)
         rgb(255, 153, 0)' values 
         border-inline-color
      </p>
   </div>
</body>

</html>

使用 HSL 值的内联边框颜色属性

可以使用 hsl 值（例如 hsl(0, 100%, 50%)）设置内联边框颜色。指定的颜色将应用于边框。在以下示例中，hsl 值已用于边框。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: #f2ebc9;
         padding: 20px;
         width: 350px;
         height: 250px;
         display: block;
         text-align: center;
         justify-content: center;
      }

      .borders {
         padding: 12px;
         border: 4px solid #a6890c;
         border-inline-style: double;
         border-inline-width: 10px;
      }

      .border1 {
         border-inline-color: hsl(180, 100%, 15%);
      }

      .border2 {
         border-inline-color: hsl(120, 50%, 40%);
      }
      .border3 {
         border-inline-color: hsl(0, 100%, 55%) 
                              hsl(60, 19%, 15%);
      }
    </style>
</head>

<body>
   <h2>
      CSS border-inline-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has 'hsl(180, 100%, 15%)' value 
         border-inline-color
      </p>
      <p class="borders border2">
         This border has 'hsl(120, 50%, 40%)' value 
         border-inline-color
      </p>
      <p class="borders border3">
         This border has 'hsl(0, 100%, 55%) 
         hsl(60, 19%, 15%)' values 
         border-inline-color
      </p>
   </div>
</body>

</html>

注意：border-inline-color 接受不同数量的值。

  • 一个值：如果给出单个值，则它应用于两个内联边框。
  • 两个值：如果给出两个值，则第一个颜色应用于第一个边框，第二个颜色应用于第二个边框。

这些已在以上示例中显示。

使用透明值的内联边框颜色属性

要设置透明的内联边框，我们使用透明值。在以下示例中，透明值已用于边框。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: #f2ebc9;
         padding: 20px;
         width: 350px;
         height: 200px;
         display: block;
         text-align: center;
         justify-content: center;
      }

      .borders {
         padding: 12px;
         border: 4px solid #a6890c;
         border-inline-style: double;
         border-inline-width: 10px;
      }

      .border1 {
         border-inline-color: transparent;
      }

    </style>
</head>

<body>
    <h2>
      CSS border-inline-color property
    </h2>
    <div class="container">
        <p class="borders border1">
            This border has 'transparent' value 
            border-inline-color
        </p>
    </div>
</body>

</html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
border-inline-color 87.0 87.0 66.0 14.1 73.0
css_properties_reference.htm
打印页面
上一页
下一页
广告