CSS - border-block-end-color 属性

CSS border-block-end-color 属性确定逻辑块末端边框颜色，并根据元素的书写模式、方向性和文本方向转换为物理边框颜色。

语法

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

属性值

值	描述
color	它指定边框的颜色。可以使用不同的颜色格式（名称、rgb 值、十六进制值、hsl 值等）。默认颜色为元素的当前颜色。
transparent	它指定边框必须是透明的。
initial	这将属性设置为其默认值。
inherit	这从父元素继承属性。

CSS 块末端边框颜色属性示例

以下示例使用不同的值解释了 border-block-end-color 属性。

使用颜色名称设置块末端边框颜色

可以使用颜色名称设置 border-block-end 的颜色。在以下示例中，紫色用于设置块末端边框颜色。

示例

<!DOCTYPE html>
<html>

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

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

</html>

使用十六进制值设置块末端边框颜色

也可以使用十六进制值设置 border-block 的颜色。在以下示例中，十六进制值 #99ff99 用于设置块边框颜色。

示例

<!DOCTYPE html>
<html>

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

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

</html>

使用 RGB 值设置块末端边框颜色

也可以使用 rgb 值设置 border-block 的颜色。在以下示例中，rgb 值 (204, 204, 0) 用于设置块边框颜色。

示例

<!DOCTYPE html>
<html>

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

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

</html>

使用 HSL 值设置块末端边框颜色

也可以使用 hsl 值设置 border-block 的颜色。在以下示例中，hsl 值 (0, 100%, 66%) 用于设置块边框颜色。

示例

<!DOCTYPE html>
<html>

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

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

</html>

透明块末端边框颜色

要设置透明的块边框颜色，我们使用 transparent 值。在以下示例中，transparent 值用于设置块边框颜色。顶部和底部边框不可见。

示例

<!DOCTYPE html>
<html>

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

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

</html>

带有书写模式的块末端边框颜色

border-block-color 属性受书写模式的影响，书写模式确定边框方向。在水平模式下，它为顶部和底部边框着色，而在垂直模式下，它为左侧和右侧边框着色，如下例所示。

示例

<!DOCTYPE html>
<html>

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

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

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

</html>

支持的浏览器

属性
border-block-end-color	69.0	79.0	41.0	12.1	56.0

css_properties_reference.htm

打印页面

上一个

下一个