CSS - border-block-color 屬性

CSS border-block-color 屬性用於指定元素的邏輯塊邊框顏色。此屬性根據書寫模式、方向和文字方向應用於物理邊框。

語法

border-block-color: color | transparent | initial | inherit;

屬性值

值	描述
顏色 (color)	指定邊框顏色。可以使用不同的顏色格式（名稱、rgb 值、十六進位制值、hsl 值等）。預設顏色為元素的當前顏色。
透明 (transparent)	指定邊框必須透明。
初始值 (initial)	將屬性設定為其預設值。
繼承 (inherit)	從父元素繼承此屬性。

CSS 塊級邊框顏色屬性示例

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

使用顏色名稱設定塊級邊框顏色

可以使用顏色名稱設定塊級邊框的顏色。在以下示例中，使用紅色設定塊級邊框顏色。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        #named-color {
            border: 7px solid black;
            border-block-color: red;
            padding: 15px;
        }
    </style>
</head>

<body>
    <div>
        <h2>
            CSS border-block-color Property
        </h2>
        <p id="named-color">
            This is a bordered element with 
            a specific border-block-color with 
            color name.
        </p>
    </div>
</body>

</html>

使用十六進位制值設定塊級邊框顏色

也可以使用十六進位制值設定塊級邊框的顏色。在以下示例中，使用十六進位制值 #9999ff 設定塊級邊框顏色。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        #hexa {
            border: 7px solid black;
            border-block-color: #9999ff;
            padding: 15px;
        }
    </style>
</head>

<body>
    <div>
        <h2>CSS border-block-color property</h2>
        <p id="hexa">
            This is a bordered element with 
            a specific border-block-color using
            hex value.
        </p>
    </div>
</body>

</html>

使用 RGB 值設定塊級邊框顏色

也可以使用 rgb 值設定塊級邊框的顏色。在以下示例中，使用 rgb 值 (204,102,255) 設定塊級邊框顏色。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        #rgb {
            border: 7px solid black;
            border-block-color:rgb(204, 102, 255);
            padding: 15px;
        }
    </style>
</head>

<body>
    <div>
        <h2>
            CSS border-block-color Property
        </h2>
        <p id="rgb">
            This is a bordered element with 
            a specific border-block-color using 
            rgb value.
        </p>
    </div>
</body>

</html>

使用 HSL 值設定塊級邊框顏色

也可以使用 hsl 值設定塊級邊框的顏色。在以下示例中，使用 hsl 值 (40, 100%, 70%) 設定塊級邊框顏色。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        #hsl {
            border: 7px solid black;
            border-block-color:hsl(40, 100%, 70%);
            padding: 15px;
        }
    </style>
</head>

<body>
    <div>
        <h2>
            CSS border-block-color Property
        </h2>
        <p id="hsl">
            This is a bordered element with 
            a specific border-block-color using 
            hsl value.
        </p>
    </div>
</body>

</html>

透明塊級邊框顏色

要設定透明塊級邊框顏色，我們使用 transparent 值。在以下示例中，使用 transparent 值設定塊級邊框顏色。頂部和底部邊框不可見。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        #hsl {
            border: 7px solid black;
            border-block-color:transparent;
            padding: 15px;
        }
    </style>
</head>

<body>
    <div>
        <h2>
            CSS border-block-color Property
        </h2>
        <p id="hsl">
            This is a bordered element with 
            a specific border-block-color using
            transparent value.
        </p>
    </div>
</body>

</html>

使用塊級邊框顏色設定不同的邊框顏色

要設定不同的塊級邊框顏色，我們可以為 border-block-color 屬性指定兩種不同的顏色。第一種顏色應用於第一個邊框，第二種顏色應用於第二個邊框。在以下示例中，使用橙色和棕色與塊級邊框顏色。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        #hsl {
            border: 7px solid black;
            border-block-color: orange brown;
            padding: 15px;
        }
    </style>
</head>

<body>
    <div>
        <h2>
            CSS border-block-color Property
        </h2>
        <p id="hsl">
            This is a bordered element with 
            a specific border-block-color using 
            different color values.
        </p>
    </div>
</body>

</html>

帶有書寫模式的塊級邊框顏色

border-block-color 屬性受書寫模式的影響，書寫模式決定了邊框方向。在水平模式下，它著色頂部和底部邊框，而在垂直模式下，它著色左側和右側邊框，如下例所示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        #horizontal {
            border: 7px solid black;
            writing-mode: horizontal-tb;
            border-block-color: blue purple;
            padding: 20px;
        }

        #vertical {
            border: 7px solid black;
            writing-mode: vertical-rl;
            border-block-color: blue purple;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div>
        <h2>
            CSS border-block-color Property
        </h2>
        <p id="horizontal">
            This shows the horizontal coloring of 
            the border-block-color property.
        </p>
        <p id="vertical">
            This shows the vertical coloring of 
            the border-block-color property.
        </p>
    </div>
</body>

</html>

支援的瀏覽器

屬性
border-block-color	87.0	87.0	66.0	14.1	73.0

css_properties_reference.htm

列印頁面