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
列印頁面
上一頁
下一頁
廣告