CSS - border-inline-width 屬性

上一頁
下一頁

CSS 的 border-inline-width 屬性確定元素的邏輯內聯邊框寬度，然後根據元素的書寫模式、方向性和文字方向轉換為物理邊框寬度。

語法

border-inline-width: medium | thin | thick | length | initial | inherit;

屬性值

值 描述
medium 指定中等邊框寬度。預設值。
thin 指定細邊框。
thick 指定粗邊框。
length 厚度可以以值的格式給出。
initial 將屬性設定為其預設值。
inherit 從父元素繼承該屬性。

CSS 內聯邊框寬度屬性示例

以下示例說明了使用不同值的 border-inline-width 屬性。

使用 medium 值的內聯邊框寬度屬性

要將中等寬度設定為內聯邊框，可以使用 medium 值。在以下示例中，border-inline-width 屬性使用了 medium 值。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 1px solid #e74c3c;
         padding: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-width: 1px;
      }

      .border2 {
         border-inline-width: medium;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-width property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has same width all sides.
      </p>
      <p class="borders border2">
         This border has a 'medium' 
         border-inline-width.
      </p>
   </div>
</body>

</html>

使用 thin 值的內聯邊框寬度屬性

要將小寬度設定為內聯邊框，可以使用 thin 值。在以下示例中，border-inline-width 屬性使用了 thin 值。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 5px solid #e74c3c;
         padding: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-width: 5px;
      }

      .border2 {
         border-inline-width: thin;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-width property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has same width all sides.
      </p>
      <p class="borders border2">
         This border has a 'thin' 
         border-inline-width.
      </p>
   </div>
</body>

</html>

使用 thick 值的內聯邊框寬度屬性

要將粗寬度設定為內聯邊框，可以使用 thick 值。在以下示例中，border-inline-width 屬性使用了 thick 值。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 2px solid #e74c3c;
         padding: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-width: 2px;
      }

      .border2 {
         border-inline-width: thick;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-width property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has same width all sides.
      </p>
      <p class="borders border2">
         This border has a 'thick' 
         border-inline-width.
      </p>
   </div>
</body>

</html>

使用長度值的內聯邊框寬度屬性

要設定內聯邊框的寬度，可以使用長度值（例如 10px、15px 等）指定寬度。在以下示例中，border-inline-width 屬性使用了長度值。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 2px solid #e74c3c;
         padding: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-width: 10px;
      }

      .border2 {
         border-inline-width: 20px;
      }

      .border3 {
         border-inline-width: 50px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-width property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has 10px border-inline-width.
      </p>
      <p class="borders border2">
         This border has 20px border-inline-width.
      </p>
      <p class="borders border3">
         This border has 50px border-inline-width.
      </p>
   </div>
</body>

</html>

使用多個值的內聯邊框寬度屬性

border-inline-width 屬性可以採用多個值。如果給定單個值，則 inline-start 和 inline-end 邊框具有相同的寬度值。如果給定兩個值，則第一個值應用於 inline-start 邊框，第二個值應用於 inline-end 邊框。這些在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: block;
            align-items: center;
            justify-content: center;
        }

        .borders {
            border: 2px solid grey;
            padding: 10px;
            text-align: center;
        }

        .border1 {
            border-inline-width: 8px;
        }

        .border2 {
            border-inline-width: 10px 25px;
        }

        .border3 {
            border-inline-width: thin thick;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-inline-width property
    </h2>
    <div class="container">
        <p class="borders border1">
            This border has 8px 
            border-inline-width - single value.
        </p>
        <p class="borders border2">
            This border has 10px and 
            25px border-inline-width - multiple values.
        </p>
        <p class="borders border3">
            This border has 'thin' and 
            'thick' border-inline-width - multiple values.
        </p>
    </div>
</body>

</html>

使用書寫模式的內聯邊框寬度屬性

border-inline-width 屬性受書寫模式的影響。在垂直書寫模式下，它會影響 inline-start 和 inline-end 邊框（頂部和底部）的寬度，而在水平書寫模式下，它會影響相同的邊框（左側和右側）的寬度。這些在以下示例中顯示。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 1px solid #e74c3c;
         padding: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-width: 10px 25px;
         writing-mode: horizontal-tb;
      }

      .border2 {
         border-inline-width: 10px 25px;
         writing-mode: vertical-lr;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-width property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has 10px and 25px border-inline-width
         with horizontal writing mode.
      </p>
      <p class="borders border2">
         This border has 10px and 25px border-inline-width
         with vertical writing mode.
      </p>
   </div>
</body>

</html>

使用方向的內聯邊框寬度屬性

border-inline-width 屬性會根據文字方向發生變化。在從右到左 (RTL) 方向中，它會影響從右到左方向的 inline-start 和 inline-end 邊框，而在從左到右 (LTR) 方向中，它會在相反的方向（從左到右）執行相同的操作。這在以下示例中顯示。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 1px solid #e74c3c;
         padding: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-width: 10px 25px;
         direction: rtl;
      }

      .border2 {
         border-inline-width: 10px 25px;
         direction: ltr;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-width property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has 10px and 25px border-inline-width
         with (right-to-left) direction.
      </p>
      <p class="borders border2">
         This border has 10px and 25px border-inline-width
         with (left-to-right) direction.
      </p>
   </div>
</body>

</html>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
border-inline-width 87.0 87.0 66.0 14.1 73.0
css_properties_reference.htm
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.