CSS - border-block-start-color 屬性

CSS border-block-start-color 屬性確定邏輯塊起始邊框顏色，並根據元素的書寫模式、方向和文字方向轉換為物理邊框顏色。

語法

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

屬性值

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

CSS 塊起始邊框顏色屬性示例

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

為塊起始邊框顏色定義顏色名稱

可以使用顏色名稱設定塊起始邊框的顏色。在以下示例中，橙色用於設定塊起始邊框顏色。

示例

<!DOCTYPE html>
<html>

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

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

</html>

定義十六進位制塊起始邊框顏色值

也可以使用十六進位制值設定塊起始邊框的顏色。在以下示例中，十六進位制值 #ccff66 用於設定塊邊框顏色。

示例

<!DOCTYPE html>
<html>

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

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

</html>

定義 RGB 塊起始邊框顏色值

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

示例

<!DOCTYPE html>
<html>

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

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

</html>

定義 HSL 塊起始邊框顏色值

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

示例

<!DOCTYPE html>
<html>

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

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

</html>

定義透明塊起始邊框顏色值

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

示例

<!DOCTYPE html>
<html>

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

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

</html>

使用書寫模式定義塊起始邊框顏色

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

示例

<!DOCTYPE html>
<html>

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

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

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

</html>

支援的瀏覽器

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

css_properties_reference.htm

列印頁面