CSS - border-inline-start-color 屬性

上一頁
下一頁

CSS border-inline-start-color 屬性指定元素的邏輯內聯起始邊框的顏色，然後根據書寫模式、方向和文字方向將此顏色轉換為元素的物理邊框顏色。

語法

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

屬性值

值 描述
color 它指定邊框的顏色。可以使用不同的顏色格式（名稱、rgb 值、十六進位制值、hsl 值等）。預設顏色為元素的當前顏色。
transparent 它指定邊框必須是透明的。
initial 這將屬性設定為其預設值。
inherit 這從父元素繼承屬性。

CSS 內聯起始邊框顏色屬性示例

以下示例使用不同的值解釋了 border-inline-start-color 屬性。

使用顏色名稱的內聯起始邊框顏色屬性。

可以使用顏色名稱（例如紅色、綠色等）設定內聯起始邊框的顏色。在以下示例中，此屬性使用了顏色名稱。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightcyan;
         padding: 20px;
         width: 100vh;
         height: 200px;
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 3px solid #e74c3c;
         padding: 20px;
         border: 3px solid red;
         border-inline-start-style: dashed;
         border-inline-start-width: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-start-color: blue;
      }

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

<body>
   <h2>
      CSS border-inline-start-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has border-inline-start-color
         as 'blue'.
      </p>
      <p class="borders border2">
         This border has border-inline-start-color 
         as 'green'.
      </p>
   </div>
</body>

</html>

使用十六進位制值的內聯起始邊框顏色屬性

可以使用十六進位制值（例如 #cc99ff、r#6600cc 等）設定內聯起始邊框的顏色。在以下示例中，此屬性使用了十六進位制值。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgrey;
         padding: 20px;
         width: 100vh;
         height: 200px;
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 3px solid #e74c3c;
         padding: 20px;
         border: 3px solid red;
         border-inline-start-style: dashed;
         border-inline-start-width: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-start-color: #99ff66;
      }

      .border2 {
         border-inline-start-color: #99ccff;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has border-inline-start-color
         as '#99ff66'.
      </p>
      <p class="borders border2">
         This border has border-inline-start-color 
         as '#99ccff'.
      </p>
   </div>
</body>

</html>

使用 RGB 值的內聯起始邊框顏色屬性

可以使用 rgb 值（例如 rgb(255, 0, 0)、rgb(128, 0, 0) 等）設定內聯起始邊框的顏色。在以下示例中，此屬性使用了 rgb 值。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgreen;
         padding: 20px;
         width: 100vh;
         height: 200px;
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 3px solid #e74c3c;
         padding: 20px;
         border: 3px solid red;
         border-inline-start-style: dashed;
         border-inline-start-width: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-start-color: rgb(102, 102, 153);
      }

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

<body>
   <h2>
      CSS border-inline-start-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has border-inline-start-color
         as 'rgb(102, 102, 153)'.
      </p>
      <p class="borders border2">
         This border has border-inline-start-color 
         as 'rgb(102, 102, 0)'.
      </p>
   </div>
</body>

</html>

使用 HSL 值的內聯起始邊框顏色屬性

可以使用 hsl 值（例如 hsl(60, 100%, 70%)、hsl(330, 100%, 40%) 等）設定內聯起始邊框的顏色。在以下示例中，此屬性使用了 hsl 值。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightcyan;
         padding: 20px;
         width: 100vh;
         height: 200px;
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 3px solid #e74c3c;
         padding: 20px;
         border: 3px solid red;
         border-inline-start-style: dashed;
         border-inline-start-width: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-start-color: hsl(60, 100%, 50%);
      }

      .border2 {
         border-inline-start-color: hsl(150, 100%, 15%);
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has border-inline-start-color
         as 'hsl(60, 100%, 50%)'.
      </p>
      <p class="borders border2">
         This border has border-inline-start-color 
         as 'hsl(150, 100%, 15%)'.
      </p>
   </div>
</body>

</html>

使用透明值的內聯起始邊框顏色屬性

要設定透明的內聯起始邊框，我們使用透明值。在以下示例中，使用了透明值。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgreen;
         padding: 20px;
         width: 100vh;
         height: 100px;
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 3px solid #e74c3c;
         padding: 20px;
         border: 3px solid red;
         border-inline-start-style: dashed;
         border-inline-start-width: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-start-color: transparent;
      }
   </style>
</head>

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

</html>

使用書寫模式的內聯起始邊框顏色屬性

border-inline-start-color 屬性受書寫模式的影響，書寫模式決定了內聯邊框起始顏色的方向。在垂直書寫模式下，它會影響頂部邊框顏色，而在水平書寫模式下，它會影響左側邊框顏色。這些在以下示例中顯示。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightcyan;
         padding: 20px;
         width: 100vh;
         height: 740px;
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 3px solid #e74c3c;
         padding: 20px;
         border: 3px solid red;
         border-inline-start-style: dashed;
         border-inline-start-width: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-start-color: darkgreen;
         writing-mode: horizontal-rl;
      }

      .border2 {
         border-inline-start-color: hsl(150, 100%, 15%);
         writing-mode: vertical-rl;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has border-inline-start-color
         as 'darkgreen' with horizontal 
         writing mode.
      </p>
      <p class="borders border2">
         This border has border-inline-start-color
         as 'hsl(150, 100%, 15%)' with vertical 
         writing mode.
      </p>
   </div>
</body>

</html>

使用方向的內聯起始邊框顏色屬性

border-inline-start-color 屬性受方向的影響，方向也決定了內聯邊框起始顏色的方向。使用 rtl（從右到左）值時，右側邊框顏色會受到影響，而使用 ltr（從左到右）值時，左側邊框顏色會受到影響。這些在以下示例中顯示。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightcyan;
         padding: 20px;
         width: 100vh;
         height: 200px;
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 3px solid #e74c3c;
         padding: 20px;
         border: 3px solid red;
         border-inline-start-style: double;
         border-inline-start-width: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-start-color: darkgreen;
         direction: rtl;
      }

      .border2 {
         border-inline-start-color: hsl(150, 100%, 15%);
         direction: ltr;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has border-inline-start-color
         as 'darkgreen' with right-to-left 
         direction.
      </p>
      <p class="borders border2">
         This border has border-inline-start-color
         as 'hsl(150, 100%, 15%)' with left-to-right
         direction.
      </p>
   </div>
</body>

</html>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
border-inline-start-color 69.0 79.0 41.0 12.1 56.0
css_properties_reference.htm
列印頁面
上一頁
下一頁
廣告