CSS - border-inline-style 屬性

上篇
下篇

CSS border-inline-style 屬性決定元素的邏輯內聯邊框應該如何顯示，將該樣式根據元素的書寫模式、方向和文字方向轉換為物理邊框樣式。

語法

border-inline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

屬性值

值 說明
none 它指定無邊框。預設值。
hidden 它類似於 none，除了在表格元素的邊框衝突解析方面有區別。
dotted 它指定一個點狀邊框。
dashed 它指定一個虛線邊框。
solid 它指定一個實線邊框。
double 它指定一個雙線邊框。
groove 它指定一個 3D 凹槽邊框。效果取決於 border-color 值。
ridge 它指定一個 3D 脊狀邊框。效果取決於 border-color 值。
inset 它指定一個 3D 插槽邊框。效果取決於 border-color 值。
outset 它指定一個 3D 外接邊框。效果取決於 border-color 值。
initial 它將屬性設定為預設值。
inherit 它從父元素繼承屬性。

CSS 內聯邊框樣式屬性示例

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

無內聯邊框樣式

為了沒有任何內聯邊框，我們使用 none 值。在以下示例中，使用了 none 值。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-inline-style: none;
      }

      p {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="border-none">
      none inline border
   </p>
   </div>
</body>

</html>

透明內聯邊框樣式

為了顯示存在但不可見的邊框，我們可以使用透明值。透明值會建立不可見的邊框，而 none 則不會建立邊框。此區別在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .borders {
         padding: 15px;
         margin: 8px;
         text-align: center;
      }

      .border1 {
         border: 8px solid gold;
         border-inline-style: none;
      }

      .border2 {
         border: 8px solid gold;
         border-inline-color: grey;
         border-inline-style: transparent;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="borders border1">
         This border is using none value, 
         so it does not have inline borders
         indicated by the gap.
      </p>
      <p class="borders border2">
         This border is using transparent value,
         so it has invisible borders. Since borders
         exist, the border color is applied to them 
         indicated by the grey color.
      </p>
   </div>
</body>

</html>

點狀內聯邊框樣式

為了顯示點狀內聯邊框，我們使用 dotted 值。在以下示例中，使用了 dotted 值和 border-inline-style 屬性。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-dotted {
         border-inline-style: dotted;
      }

      p {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="border-dotted">
         dotted inline borders
      </p>
   </div>
</body>

</html>

虛線內聯邊框樣式

為了顯示虛線內聯邊框，我們使用 dashed 值。在以下示例中，使用了 dashed 值和 border-inline-style 屬性。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-dashed {
         border-inline-style: dashed;
      }

      p {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="border-dashed">
         dashed inline borders
      </p>
   </div>
</body>

</html>

實線內聯邊框樣式

為了顯示實線內聯邊框，我們使用 solid 值。在以下示例中，使用了 solid 值和 border-inline-style 屬性。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-solid {
         border-inline-style: solid;
      }

      p {
         padding: 15px;
         border: 6px dashed gold;
         margin: 8px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="border-solid">
         solid inline borders
      </p>
   </div>
</body>

</html>

雙線內聯邊框樣式

為了顯示雙線內聯邊框，我們使用 double 值。在以下示例中，使用了 double 值和 border-inline-style 屬性。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-double {
         border-inline-style: double;
      }

      p {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="border-double">
         double inline borders
      </p>
   </div>
</body>

</html>

凹槽內聯邊框樣式

若要設定內聯邊框的凹槽，可以使用 groove 值。在以下示例中，groove 值與 border-inline-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-groove {
         border-inline-style: groove;
      }

      p {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="border-groove">
         groove inline borders
      </p>
   </div>
</body>

</html>

山脊邊框內聯樣式

若要設定內聯邊框的山脊，可以使用 ridge 值。在以下示例中，ridge 值與 border-inline-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-ridge {
         border-inline-style: ridge;
      }

      p {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="border-ridge">
         ridge inline borders
      </p>
   </div>
</body>

</html>

內嵌邊框內聯樣式

若要設定內嵌內聯邊框，可以使用 inset 值。在以下示例中，inset 值與 border-inline-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-inset {
         border-inline-style: inset;
      }

      p {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="border-inset">
         inset inline borders
      </p>
   </div>
</body>

</html>

外凸邊框內聯樣式

若要設定外凸內聯邊框，可以使用 outset 值。在以下示例中，outset 值與 border-inline-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-outset {
         border-inline-style: outset;
      }

      p {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="border-outset">
         outset inline borders
      </p>
   </div>
</body>

</html>

具有多重樣式的邊框內聯樣式屬性

如果給定的值為單個值，則內聯邊框的樣式可以具有多個值。此值應用於內聯起始邊框和結尾邊框。如果給定的是兩個值，則第一個樣式應用於內聯起始邊框，第二個樣式應用於內聯結尾邊框。以下示例中顯示了此類情況。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .borders {
         padding: 15px;
         border: 2px solid gold;
         margin: 8px;
         border-inline-width: 10px;
         border-inline-color: red;
         text-align: center;
      }

      .border1 {
         border-inline-style: double;
      }

      .border2 {
         border-inline-style: dashed dotted;
      }
      .border3 {
         border-inline-style: double solid;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="borders border1">
         double inline borders- single value
      </p>
      <p class="borders border2">
         double and solid inline borders- multiple values
      </p>
      <p class="borders border3">
         double and solid inline borders- multiple values
      </p>
   </div>
</body>

</html>

具有書寫模式的邊框內聯樣式

border-inline-style 屬性受書寫模式影響。在垂直書寫模式下，它影響 inline-start 和 inline-end 邊界（頂部和底部），而在水平書寫模式下，它影響相同的邊框（左和右）。以下示例對此進行了說明。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .borders {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
         border-inline-style: dashed dotted;
         border-inline-color: red;
         text-align: center;
      }

      .border1 {
         writing-mode: horizontal-tb;
      }

      .border2 {
         writing-mode: vertical-rl;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="borders border1">
         dashed inline border with 
         horizontal writing mode
      </p>
      <p class="borders border2">
         dashed inline border with 
         vertical writing mode.
      </p>
   </div>
</body>

</html>

具有方向的邊框內聯樣式

border-inline-style 屬性受方向的影響，而方向也決定內聯邊框樣式的方向。當具有 rtl（從右到左）值時，影響 inline-end（右邊界）樣式，而當具有 ltr（從左到右）值時，影響 inline-start（左邊界）樣式。以下示例中顯示了此類情況。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .borders {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
         text-align: center;
         border-inline-style: dashed dotted;
      }

      .border1 {
         direction: rtl;
      }

      .border2 {
         direction: ltr;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="borders border1">
         dashed inline border with 
         (right-to-left) direction.
      </p>
      <p class="borders border2">
         dashed inline border with 
         (left-to-right) direction.
      </p>
   </div>
</body>

</html>

受支援的瀏覽器

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