CSS - border-inline-end 屬性

CSS border-inline-end 是一個簡寫屬性，用於在一個語句中定義多個不同的邏輯內聯結束邊框屬性 border-inline-end-width、border-inline-end-style 和 border-inline-end-color。書寫模式、文字方向和方向決定邊框的方向。

語法

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

屬性值

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

CSS 內聯結束邊框屬性示例

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

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

要在一個語句中設定 border-inline-end-width、border-inline-end-style 和 border-inline-end-color 的值，我們使用 border-inline-end 屬性。三個屬性的值可以在一個語句中給出。以下示例顯示瞭如何執行此操作。

示例

<!DOCTYPE html>
<html>

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

      }

      .borders {
         color:blue;
         border: 1px solid black;
         margin: 15px;
         padding: 20px;
         text-align: center;
      }

      .border1 {
         border-inline-end: 6px solid #3498db;
      }

      .border2 {
         border-inline-end: 8px double #9900ff;
      }

      .border3 {
         border-inline-end: 10px dashed #009900;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-end property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border shows the boder-inline-end 
         property with 6px width, solid style 
         and #3498db color.
      </p>
      <p class="borders border2">
         This border shows the boder-inline-end
         property with 8px width, double style
         and #9900ff color.
      </p>
      <p class="borders border3">
         This border shows the boder-inline-end
         property with 10px width, dashed style
         and #009900 color.
      </p>
   </div>
</body>

</html>

內聯結束邊框屬性的組成屬性

border-inline-end 屬性是 border-inline-end-width、border-inline-end-style 和 border-inline-end-color 屬性的組合。以下示例顯示瞭如何組合使用這些屬性來顯示 border-inline-end 屬性效果。

示例

<!DOCTYPE html>
<html>

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

      }

      .borders {
         color:blue;
         border: 1px solid black;
         margin: 15px;
         padding: 20px;
         text-align: center;
      }

      .border1 {
         border-inline-end-width: 8px;
         border-inline-end-style: dashed;
         border-inline-end-color: red;
      }

      .border2 {
         border-inline-end-width: 8px;
         border-inline-end-style: dotted;
         border-inline-end-color:  orange;
      }

   </style>
</head>

<body>
   <h2>
      CSS border-inline-end property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border shows the boder-inline-end
         property with 8px width, dashed style 
         and red color.
      </p>
      <p class="borders border2">
         This border shows the boder-inline-end
         property with 8px width, dotted style 
         and orange color.
      </p>
   </div>
</body>

</html>

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

border-inline-end 屬性受書寫模式的影響，書寫模式決定內聯結束邊框的方向。在垂直書寫模式下，它影響底部邊框，而在水平書寫模式下，它影響右邊框。以下示例顯示了這些。

示例

<!DOCTYPE html>
<html>

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

      }

      .borders {
         color:blue;
         border: 1px solid black;
         margin: 15px;
         padding: 20px;
         text-align: center;
      }

      .border1 {
         border-inline-end: 8px dashed red;
         writing-mode: horizontal-tb ;
      }

      .border2 {
         border-inline-end: 8px dashed red;
         writing-mode: vertical-rl;
      }

   </style>
</head>

<body>
   <h2>
      CSS border-inline-end property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border shows the boder-inline-end
         property with 8px width, dashed style and
         red color with horizontal writing mode.
      </p>
      <p class="borders border2">
         This border shows the boder-inline-end 
         property with 8px width, dashed style and 
         red color with vertical writing mode.
      </p>
   </div>
</body>

</html>

帶方向的內聯結束邊框屬性

border-inline-end 屬性受方向的影響，方向也決定內聯結束邊框的方向。使用 rtl（從右到左）值時，會影響左邊框；使用 ltr（從左到右）值時，會影響右邊框。以下示例顯示了這些。

示例

<!DOCTYPE html>
<html>

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

      }

      .borders {
         color:blue;
         border: 1px solid black;
         margin: 15px;
         padding: 20px;
         text-align: center;
      }

      .border1 {
         border-inline-end: 8px dashed red;
         direction: rtl ;
      }

      .border2 {
         border-inline-end: 8px dashed red;
         direction: ltr;
      }

   </style>
</head>

<body>
   <h2>
      CSS border-inline-end property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border shows the boder-inline-end property
         with 8px width, dashed style and red color with
         right-to-left direction.
      </p>
      <p class="borders border2">
         This border shows the boder-inline-end property
         with 8px width, dashed style and red color 
         with left-to-right direction.
      </p>
   </div>
</body>

</html>

支援的瀏覽器

屬性
border-inline-end	69.0	79.0	41.0	12.1	56.0

css_properties_reference.htm

列印頁面