CSS - border-block-start 屬性

CSS border-block-start 屬性是一個簡寫屬性，它提供了一種簡單的方法來設定所有邏輯塊起始邊框屬性的值，例如 border-block-start-width、border-block-start-style 和 border-block-start-color，只需一個宣告即可。此屬性受書寫模式的影響，書寫模式決定了塊方向。

語法

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

屬性值

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

CSS 邊框塊起始屬性示例

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

設定所有邊框塊起始屬性值

要在單個宣告中設定 border-block-start-width、border-block-start-style 和 border-block-start-color 的值，我們使用 border-block-start 屬性。在以下示例中，使用了 4px 寬度、虛線樣式和藍色。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        #color {
            border: 1px solid black;
            width: 300px;
            padding: 60px;
            border-block-start: 4px dashed blue;
        }
    </style>
</head>

<body>

    <h2>
        The border-block-start Property
    </h2>
    <p id="color">
        This shows the border block start  property 
        where all values have been set at once. Width-4px,
        style-dashed,color-blue
    </p>
</body>

</html>

邊框塊起始屬性的組成部分

border-block-start 屬性是 border-block-start-width、border-block-start-style 和 border-block-start-color 的組合。以下示例顯示了這些單個屬性如何協同工作以顯示 border-block-start 效果。

示例

    
<!DOCTYPE html>
<html>

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

<body>
    <h2>
        CSS border-block-start property
    </h2>
    <p class="box">
        This is how border-block-start property 
        works. It is a combination of border-block-start-width,
        border-block-start-style and border-block-start-color.
    </p>
</body>

</html>

</html>

使用書寫模式設定邊框塊起始屬性

border-block-start 屬性受書寫模式的影響，書寫模式決定了邊框的方向。水平模式影響頂部和底部邊框，而垂直模式影響左側和右側邊框。這些在以下示例中顯示。

示例

    
<!DOCTYPE html>
<html>

<head>
    <style>
        #horizontal {
            border: 1px solid black;
            width: 300px;
            padding: 40px;
            writing-mode: horizontal-tb;
            border-block-start: 7px solid orange;

        }

        #vertical {
            border: 1px solid black;
            height: 500px;
            padding: 40px;
            writing-mode: vertical-rl;
            border-block-start: 8px solid orange;

        }
    </style>
</head>

<body>
    <h2>
        The border-block-start Property
    </h2>
    <p id="horizontal">
        This shows the border block start with horizontal 
        writing mode.
    </p>
    <p id="vertical">
        This shows the border block start with 
        vertical writing mode.
    </p>
</body>

</html>

支援的瀏覽器

屬性
border-block-start	69.0	79.0	41.0	12.1	56.0

css_properties_reference.htm

列印頁面