CSS - border-block-style 屬性

上一頁
下一頁

CSS border-block-style 屬性確定塊方向上的邏輯塊邊框，受書寫模式（水平和垂直）的影響。如果指定了兩種樣式，則第一種應用於起始邊框，第二種應用於結束邊框。如果只給出了一種樣式，則它應用於兩個邊框。

語法

border-block-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 值。
inherit 從父元素繼承該屬性。

CSS 邊框塊樣式屬性示例

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

無邊框邊框塊樣式

為了避免在 border-block 處出現邊框，我們使用 none 值。在以下示例中，none 值已與 border-block-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         border: 2px solid black;
         padding: 10%;
         border-block-style: none;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">
      This shows the border-block-style
      property with none value.
   </p>
</body>

</html>

隱藏邊框塊樣式

要設定隱藏邊框塊，我們使用 hidden 值。這使得邊框佔用空間，但保持不可見。以下示例顯示了此效果，其中紅色指示線突出顯示了隱藏的邊框。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         width: 300px;
         padding: 10%;
         border: 2px solid black;
         position: relative;
         margin-bottom: 20px;
      }

      .none {
         border-block-style: none;
      }

      .hidden {
         border-block-style: hidden;
      }

      .indicator {
         background-color: grey;
         height: 5px;
         width: 100%;
         position: absolute;
         left: 0;
         display: none;
      }

      .show-indicator .indicator-top {
         top: 0;
         display: block;
      }

      .show-indicator .indicator-bottom {
         bottom: 0;
         display: block;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <div class="container none">
      Border Block Style: none
   </div>
   <div class="container hidden show-indicator">
      Border Block Style: hidden
   <div class="indicator indicator-top">
   </div>
   <div class="indicator indicator-bottom">
   </div>
   </div>
</body>

</html>

點狀邊框塊樣式

要獲得點狀邊框塊，我們使用 dotted 值。在以下示例中，dotted 值已與 border-block-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         border: 4px solid black;
         padding: 10%;
         border-block-style: dotted;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">
      This shows the border-block-style
      property with dotted value.
   </p>
</body>

</html>

虛線邊框塊樣式

要獲得虛線邊框塊，我們使用 dashed 值。在以下示例中，dashed 值已與 border-block-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         border: 4px solid black;
         padding: 10%;
         border-block-style: dashed;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">
      This shows the border-block-style
      property with dashed value.
   </p>
</body>

</html>

實線邊框塊樣式

要獲得實線邊框塊，我們使用 solid 值。在以下示例中，solid 值已與 border-block-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         border: 4px solid black;
         padding: 10%;
         border-block-style: solid;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">
      This shows the border-block-style
      property with solid value.
   </p>
</body>

</html>

雙線邊框塊樣式

要獲得雙線邊框塊，我們使用 double 值。在以下示例中，double 值已與 border-block-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         border: 6px solid black;
         padding: 10%;
         border-block-style: double;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">
      This shows the border-block-style
      property with double value.
   </p>
</body>

</html>

凹槽邊框塊樣式

要獲得 3D 凹槽邊框塊，我們使用 groove 值。此效果取決於 border-color。在以下示例中，groove 值已與 border-block-style 屬性一起使用，邊框顏色為紅色。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         border: 15px solid red;
         padding: 10%;
         border-block-style: groove;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">
      This shows the border-block-style
      property with groove value.
   </p>
</body>

</html>

脊狀邊框塊樣式

要獲得 3D 脊狀邊框塊，我們使用 ridge 值。此效果取決於 border-color。在以下示例中，ridge 值已與 border-block-style 屬性一起使用，邊框顏色為黃色。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         border: 15px solid yellow;
         padding: 10%;
         border-block-style: ridge;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">T
      This shows the border-block-style
      property with ridge value.
   </p>
</body>

</html>

內嵌邊框塊樣式

要獲得 3D 內嵌邊框塊，我們使用 inset 值。此效果取決於 border-color。在以下示例中，inset 值已與 border-block-style 屬性一起使用，邊框顏色為橙色。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         border: 15px solid orange;
         padding: 10%;
         border-block-style: inset;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">
      This shows the border-block-style
      property with inset value.
   </p>
</body>

</html>

外凸邊框塊樣式

要獲得 3D 外凸邊框塊，我們使用 outset 值。此效果取決於 border-color。在以下示例中，outset 值已與 border-block-style 屬性一起使用，邊框顏色為綠色。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
            border: 20px solid green;
            padding: 10%;
            border-block-style: outset;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">
      This shows the border-block-style
      property with outset value.
   </p>
</body>

</html>

帶書寫模式的邊框塊樣式

書寫模式會影響 border-block-style 屬性，因為它確定邊框的方向。水平模式用於頂部和底部邊框，垂直模式用於右側和左側邊框。這些在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      #horizontal {
         border: 1px solid black;
         padding: 8%;
         writing-mode: horizontal-tb;
         border-block-width:5px;
         border-block-style: dashed dotted;
      }

      #vertical {
         border: 1px solid black;
         padding: 8%;
         writing-mode: vertical-rl;
         border-block-width:5px;
         border-block-style:dashed dotted;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p id="horizontal">
      This shows the border-block-style property 
      with dashed and dotted style in horizontal mode.
   </p>
   <p id="vertical">
      This shows the border-block-style property 
      with dashed and dotted style in vertical mode.
   </p>
</body>

</html>

支援的瀏覽器

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