CSS - border-inline 屬性

CSS border-inline 是一個簡寫屬性，它在一個宣告中設定不同的邏輯內聯邊框屬性的值，例如 border-inline-width、border-inline-style 和 border-inline-color。border-style 是必需的。如果未指定，則將使用顏色的預設值和寬度。此屬性受書寫模式、文字方向和方向的影響。

語法

border-inline: border-inline-width border-inline-style border-inline-color | initial | inherit;

屬性值

值	描述
border-inline-width	它指定元素在內聯方向上的邊框寬度。預設值為 medium。
border-inline-style	它指定元素在內聯方向上的邊框樣式。預設值為 none。
border-inline-color	它指定元素在內聯方向上的邊框顏色。預設值為文字顏色。
initial	它將屬性設定為其預設值。
inherit	它從父元素繼承屬性。

CSS 內聯邊框屬性示例

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

定義內聯邊框屬性的所有值

為了在一個宣告中定義 border-inline-width、border-inline-style 和 border-inline-color 的值，我們使用 border-inline 屬性。以下示例演示瞭如何操作。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgrey;
         width: 100vh;
         height: 400px;
         display: block;
         justify-content: center;
         padding: 25px;
         text-align: center;
         font-weight:bold;
      }

      .borders {
         border: 1px solid black;
         padding: 20px;
      }

      .border1 {
         border-inline: 4px solid red;
      }

      .border2 {
         border-inline: 6px dashed blue;
      }

      .border3 {
         border-inline: 8px dotted yellow;
      }

      .border4 {
         border-inline: 8px double brown;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline property
   </h2>
   <div class="container">
      <p class="borders border1">
         This has border-inline property with 
         4px width solid style and red color
      </p>
      <p class="borders border2">
         This has border-inline property with 
         6px width dashed style and blue color
      </p>
      <p class="borders border3">
         This has border-inline property with 
         8px width dotted style and yellow color
      </p>
      <p class="borders border4 ">
         This has border-inline property with 
         8px width double style and brown color
      </p>
   </div>
</body>

</html>

內聯邊框屬性的組成屬性

border-inline 屬性由屬性 border-inline-width、border-inline-style 和 border-inline-color 組成。以下示例演示了這些單個屬性如何組合以顯示 border-inline 效果。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgreen;
         width: 100vh;
         height: 200px;
         display: block;
         justify-content: center;
         padding: 25px;
         text-align: center;
         font-weight: bold;
      }

      .borders {
         border: 1px solid black;
         padding: 20px;
      }

      .border1 {
         border-inline-width: 4px;
         border-inline-style: solid;
         border-inline-color: red;
      }

      .border2 {
         border-inline-width: 6px;
         border-inline-style: dashed;
         border-inline-color: blue;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline property
   </h2>
   <div class="container">
   <p class="borders border1"> 
      This has border-inline-width:4px, 
      border-inline-style:solid, 
      border-inline-color:red
   </p>
   <p class="borders border2">
      This has border-inline-width:6px, 
      border-inline-style:dashed, 
      border-inline-color:blue
   </p>
   </div>
</body>

</html>

帶有書寫模式的內聯邊框屬性

border-inline 屬性受書寫模式的影響，書寫模式決定內聯邊框的方向。在垂直書寫模式下，它影響頂部和底部邊框；在水平書寫模式下，它影響左側和右側邊框。以下示例中顯示了這些內容。

示例

   
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         justify-content: center;
         padding: 25px;
         text-align: center;
         font-weight: bold;
      }

      .borders {
         border: 1px solid black;
         padding: 20px;
      }

      .border1 {
         border-inline: 4px solid red;
         writing-mode: horizontal-rl;
      }

      .border2 {
         border-inline: 6px dashed blue;
         writing-mode: vertical-rl;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline property
   </h2>
   <div class="container">
   <p class="borders border1">
      This has border-inline 4px width, 
      solid style, red color and 
      horizontal writing mode.
   </p>
   <p class="borders border2">
      This has border-inline 6px width,
      dashed style, blue color and 
      vertical writing mode.
   </p>
   </div>
</body>

</html>

支援的瀏覽器

屬性
border-inline	87.0	87.0	66.0	14.1	73.0

css_properties_reference.htm

列印頁面