CSS - border-block-end-style 屬性

上一頁
下一頁

CSS border-block-end-style 屬性用於定義邏輯塊末端邊框樣式，並根據元素的書寫模式、方向性和文字方向轉換為物理邊框樣式。

語法

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

CSS 邊框塊末端樣式屬性示例

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

將邊框塊末端樣式設定為無邊框

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

示例

<!DOCTYPE html>
<html>

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

<body>
    <h2>
        CSS border-block-end-style Property
    </h2>
    <p class="box">
        This shows the border-block-end-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-end-width: 5px;
            border-block-end-style: none;
            border-block-end-color: transparent;
        }

        .hidden {
            border-block-end-width: 5px;
            border-block-end-style: hidden;
            border-block-end-color: transparent;
        }

        .indicator {
            background-color: red;
            height: 5px;
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
        }

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

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

</html>

點狀邊框塊末端樣式

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

示例

<!DOCTYPE html>
<html>

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

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

</html>

虛線邊框塊末端樣式

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

示例

<!DOCTYPE html>
<html>

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

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

</html>

實線邊框塊末端樣式

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

示例

<!DOCTYPE html>
<html>

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

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

</html>

將邊框塊末端樣式設定為雙線邊框

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

示例

<!DOCTYPE html>
<html>

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

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

</html>

凹槽邊框塊末端樣式

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

示例

<!DOCTYPE html>
<html>

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

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

</html>

凸起邊框塊末端樣式

要在邊框塊末端具有 3D 凸起邊框，我們使用 ridge 值。此效果取決於 border-color。在以下示例中，ridge 值已與黃色邊框顏色一起與 border-block-end-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

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

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

</html>

內嵌邊框塊末端樣式

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

示例

<!DOCTYPE html>
<html>

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

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

</html>

外凸邊框塊末端樣式

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

示例

<!DOCTYPE html>
<html>

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

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

</html>

支援的瀏覽器

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