CSS - border-block-end-width 屬性

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

語法

border-block-end-width: medium | thin | thick | length | initial | inherit;

屬性值

值	描述
medium	指定中等邊框寬度。預設值。
thin	指定細邊框。
thick	指定粗邊框。
length	厚度可以以值的形式給出。
initial	將屬性設定為其預設值。
inherit	從父元素繼承該屬性。

CSS 邊框塊末端寬度屬性示例

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

使用邊框塊末端寬度設定中等邊框

要為 border-block-end-width 設定中等邊框，我們使用 medium 值。在以下示例中，使用了 medium 值。

示例

<!DOCTYPE html>
<html>

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

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

</html>

使用邊框塊末端寬度設定細邊框

要為 border-block-end-width 設定細邊框，我們使用 thin 值。在以下示例中，使用了 thin 值。

示例

<!DOCTYPE html>
<html>

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

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

</html>

使用邊框塊末端寬度設定粗邊框

要根據我們的選擇為 border-block-end-width 設定粗邊框，我們使用 thick 值。在以下示例中，使用了 thick 值。

示例

<!DOCTYPE html>
<html>

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

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

</html>

使用邊框塊末端寬度設定自定義邊框

要設定 border-block-end-width 的邊框厚度，我們根據我們的選擇指定厚度值。在以下示例中，使用了 20px 厚度值。

示例

<!DOCTYPE html>
<html>

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

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

</html>

帶書寫模式的邊框塊末端寬度

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

示例

<!DOCTYPE html>
<html>

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

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

<body>
    <h2>
        CSS border-block-end-width Property
    </h2>
    <p id="horizontal">
        This shows the border-block-end-width property
        with 15px value in horizontal mode.
    </p>
    <p id="vertical">
        This shows the border-block-end-width property
        with 15px value in vertical mode.
    </p>
</body>

</html>

支援的瀏覽器

屬性
border-block-end-width	69.0	79.0	41.0	12.1	56.0

css_properties_reference.htm

列印頁面