CSS - border-inline-end-style 屬性

上一頁
下一頁

CSS border-inline-end-style 屬性確定元素內聯結束邊框的樣式，該樣式又根據元素的書寫模式、方向和文字方向對映到元素的物理邊框。

語法

border-inline-end-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-end-style 屬性。

無邊框內聯結束樣式

為了不在內聯末端設定任何邊框，我們使用 none 值。在以下示例中，使用了 none 值。

示例

<!DOCTYPE html>
<html>

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

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

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

</html>

透明邊框內聯結束樣式

為了設定一個存在但不可見的邊框，我們可以使用 transparent 值。與建立無邊框的 none 值相比，transparent 值建立了一個不可見的邊框。此區別在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .borders {
         padding: 15px;
         margin: 8px;
      }

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

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

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

</html>

點狀邊框內聯結束樣式

為了設定點狀內聯結束邊框，我們使用 dotted 值。在以下示例中，dotted 值已與 border-inline-end-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

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

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

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

</html>

虛線邊框內聯結束樣式

為了設定虛線內聯結束邊框，我們使用 dashed 值。在以下示例中，dashed 值已與 border-inline-end-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

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

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

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

</html>

實線邊框內聯結束樣式

為了設定實線內聯結束邊框，我們使用 solid 值。在以下示例中，solid 值已與 border-inline-end-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

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

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

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

</html>

雙線邊框內聯結束樣式

為了設定雙線內聯結束邊框，我們使用 double 值。在以下示例中，double 值已與 border-inline-end-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

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

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

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

</html>

凹槽邊框內聯結束樣式

為了設定凹槽內聯結束邊框，我們使用 groove 值。在以下示例中，groove 值已與 border-inline-end-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

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

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

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

</html>

凸起邊框內聯結束樣式

為了設定凸起內聯結束邊框，我們使用 ridge 值。在以下示例中，ridge 值已與 border-inline-end-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

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

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

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

</html>

內嵌邊框內聯結束樣式

為了設定內嵌內聯結束邊框，我們使用 inset 值。在以下示例中，inset 值已與 border-inline-end-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

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

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

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

</html>

外凸邊框內聯結束樣式

為了設定外凸內聯結束邊框，我們使用 outset 值。在以下示例中，outset 值已與 border-inline-end-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

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

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

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

</html>

帶有書寫模式的邊框內聯結束樣式

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

示例

<!DOCTYPE html>
<html>

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

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

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

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

</html>

帶有方向的邊框內聯結束樣式

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

示例

<!DOCTYPE html>
<html>

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

      .border1 {
         direction: rtl;
      }

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

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

</html>

支援的瀏覽器

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