CSS - border-block-end 属性

CSS border-block-end 属性是一个简写属性，提供了一种简单的方法来设置所有逻辑块结尾边框属性的值，例如 border-block-end-width、border-block-end-style 和 border-block-end-color，只需在一个样式表中即可。此属性受书写模式的影响。

语法

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

属性值

值	描述
border-block-end-width	它指定元素在块方向末端的边框宽度。默认值为 medium。
border-block-end-style	它指定元素在块方向末端的边框样式。默认值为 none。
border-block-end-color	它指定元素在块方向末端的边框颜色。默认值为当前边框颜色。
initial	这将属性设置为其默认值。
inherit	这从父元素继承属性。

CSS Border Block End 属性示例

以下示例说明了使用不同值的 border-block-end 属性。

设置边框块结尾

要一次设置 border-block-end-width、border-block-end-style 和 border-block-end-color 的所有值，我们使用 border-block-end 属性。所有值都将在一个声明中定义。在下面的示例中，使用了 10px 宽度、双线样式和蓝色。

示例

    
<!DOCTYPE html>
<html>

<head>
    <style>
        #color {
            border: 1px solid black;
            width: 300px;
            padding: 60px;
            border-block-end: 10px double blue;
        }
    </style>
</head>

<body>

    <h2>
        CSS border-block-end Property
    </h2>

    <p id="color">
        This shows the border block end  property 
        where all values have been set at once. Width-10px,
        style-double,color-blue
    </p>
</body>

</html>

Border Block End 的替换属性

border-block-end 属性是 border-block-end-width、border-block-end-style 和 border-block-end-color 的组合。以下示例显示了这些单个属性如何协同工作以显示 border-block-end 效果。

示例

    
<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            border: 1px solid black;
            padding: 10%;
            border-block-end-width: 5px;
            border-block-end-style: solid;
            border-block-end-color: blue;
        }
    </style>
</head>

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

</html>

</html>

在书写模式下设置边框块结尾

border-block-end 属性受书写模式的影响，书写模式决定了边框的方向。水平模式影响顶部和底部边框，而垂直模式影响左侧和右侧边框。这些在下面的示例中显示。

示例

    
<!DOCTYPE html>
<html>

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

        }

        #vertical {
            border: 1px solid black;
            height: 500px;
            padding: 40px;
            writing-mode: vertical-lr;
            border-block-end: 6px solid black;

        }
    </style>
</head>

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

</html>

支持的浏览器

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

css_properties_reference.htm

打印页面