CSS - border-block 屬性

CSS border-block 屬性是用於一次性為 border-block-color、border-block-style 和 border-block-width 分配值的簡寫屬性。border-block-style 是必填引數。如果未提及其他引數，則將使用預設值。此屬性取決於塊的方向，該方向由書寫模式確定。

語法

border-block: border-block-width border-block-style border-block-color | initial | inherit;

屬性值

值	描述
border-block-width	它指定塊方向上邊框的寬度。預設值為 medium。
border-block-style	它指定塊方向上邊框的樣式。預設值為 none。
border-block-color	它指定塊方向上邊框的顏色。預設值為文字顏色。
initial	這將屬性設定為其預設值。
inherit	這從父元素繼承屬性。

CSS 邊框塊屬性示例

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

設定邊框寬度

要設定邊框的寬度，我們使用 border-block 屬性的 border-block-width 元件。在以下示例中，我們為 border-block-width 屬性使用了“thick”和 10px 寬度。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        #width1 {
            padding: 30px;
            border-block-style: solid;
            border-block-width: thick;
        }

        #width2 {
            padding: 30px;
            border-block-style: solid;
            border-block-width: 10px;
        }
    </style>
</head>
<body>
    <h2>CSS border-block property</h2>
    <p id="width1">
        This first example shows the width property 
        of the border-block with thick value.
    </p>
    <p id="width2">
        This second example shows the width property 
        of the border-block with 10px value.
    </p>
</body>
</html>

設定邊框樣式

要設定邊框的樣式，我們使用 border-block 屬性的 border-block-style 元件。在以下示例中，我們為 border-block-style 屬性使用了“solid”和“dashed”樣式。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        #style1 {
            padding: 30px;
            border-block-style: solid;
        }

        #style2 {
            padding: 30px;
            border-block-style: dashed;
        }
    </style>
</head>
<body>
    <h2>CSS border-block property</h2>
    <p id="style1">
        This first example shows the style property 
        of the border-block with solid value.
    </p>
    <p id="style2">
        This second example shows the style property 
        of the border-block with dashed value.
    </p>
</body>
</html>

設定邊框顏色

要設定邊框的顏色，我們使用 border-block 屬性的 border-block-color 元件。在以下示例中，我們為 border-block-color 屬性使用了“red”和“blue”顏色。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        #color1 {
            padding: 30px;
            border-block-style: solid;
            border-block-color:red;
        }

        #color2 {
            padding: 30px;
            border-block-style: solid;
            border-block-color:blue;
        }
    </style>
</head>
<body>
    <h2>CSS border-block property</h2>
    <p id="color1">
        This first example shows the color property 
        of the border-block with red value.
    </p>
    <p id="color2">
        This second example shows the color property 
        of the border-block with blue value.
    </p>
</body>
</html>

一次設定所有值

要一次設定寬度、樣式和顏色的值，我們可以簡單地使用 border-block 屬性，並一次提供所有值。在以下示例中，寬度為 5px，樣式為 dashed，顏色為綠色。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        #block {
            padding: 30px;
            border-block: 5px dashed green;
        }

    </style>
</head>
<body>
    <h2>CSS border-block property</h2>
    <p id="block">
        This example shows the border-block property 
        defining all values at once.
    </p>
</body>
</html>

使用書寫模式設定邊框塊

在 border-block 的上下文中，writing-mode 會影響邊框的方向。預設情況下，邊框水平顯示，但是透過更改書寫模式，可以更改邊框的方向。

水平-tb：邊框水平顯示。
垂直-lb：邊框垂直顯示。

這些在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        #horizontal {
            inline-size: 200px;
            padding: 10px;
            writing-mode: horizontal-tb;
            border-block: 5px dashed red;
        }

        #vertical {
            inline-size: 200px;
            padding: 10px;
            writing-mode: vertical-rl;
            border-block: 5px dashed green;
        }
    </style>
</head>
<body>
    <h2>CSS border-block property</h2>
    <div>
        <p id="horizontal">This example shows the
        horizontal boder.</p>
    </div>
    <div>
        <p id="vertical"> This example shows the 
        vertical border.</p>
    </div>
</body>
</html>

支援的瀏覽器

屬性
border-block	87.0	87.0	66.0	14.1	73.0

css_properties_reference.htm

列印頁面