CSS - border-block 属性

CSS border-block 属性是用于一次性为 border-block-color、border-block-style 和 border-block-width 分配值的简写属性。border-block-style 是必填参数。如果未提及其他参数，则将使用默认值。此属性取决于块的方向，该方向由书写模式确定。

语法

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

属性值

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

CSS 边框块属性示例

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

设置边框宽度

要设置边框的宽度，我们使用 border-block 属性的 border-block-width 组件。在以下示例中，我们为 border-block-width 属性使用了“thick”和 10px 宽度。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        #width1 {
            padding: 30px;
            border-block-style: solid;
            border-block-width: thick;
        }

        #width2 {
            padding: 30px;
            border-block-style: solid;
            border-block-width: 10px;
        }
    </style>
</head>
<body>
    <h2>CSS border-block property</h2>
    <p id="width1">
        This first example shows the width property 
        of the border-block with thick value.
    </p>
    <p id="width2">
        This second example shows the width property 
        of the border-block with 10px value.
    </p>
</body>
</html>

设置边框样式

要设置边框的样式，我们使用 border-block 属性的 border-block-style 组件。在以下示例中，我们为 border-block-style 属性使用了“solid”和“dashed”样式。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        #style1 {
            padding: 30px;
            border-block-style: solid;
        }

        #style2 {
            padding: 30px;
            border-block-style: dashed;
        }
    </style>
</head>
<body>
    <h2>CSS border-block property</h2>
    <p id="style1">
        This first example shows the style property 
        of the border-block with solid value.
    </p>
    <p id="style2">
        This second example shows the style property 
        of the border-block with dashed value.
    </p>
</body>
</html>

设置边框颜色

要设置边框的颜色，我们使用 border-block 属性的 border-block-color 组件。在以下示例中，我们为 border-block-color 属性使用了“red”和“blue”颜色。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        #color1 {
            padding: 30px;
            border-block-style: solid;
            border-block-color:red;
        }

        #color2 {
            padding: 30px;
            border-block-style: solid;
            border-block-color:blue;
        }
    </style>
</head>
<body>
    <h2>CSS border-block property</h2>
    <p id="color1">
        This first example shows the color property 
        of the border-block with red value.
    </p>
    <p id="color2">
        This second example shows the color property 
        of the border-block with blue value.
    </p>
</body>
</html>

一次设置所有值

要一次设置宽度、样式和颜色的值，我们可以简单地使用 border-block 属性，并一次提供所有值。在以下示例中，宽度为 5px，样式为 dashed，颜色为绿色。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        #block {
            padding: 30px;
            border-block: 5px dashed green;
        }

    </style>
</head>
<body>
    <h2>CSS border-block property</h2>
    <p id="block">
        This example shows the border-block property 
        defining all values at once.
    </p>
</body>
</html>

使用书写模式设置边框块

在 border-block 的上下文中，writing-mode 会影响边框的方向。默认情况下，边框水平显示，但是通过更改书写模式，可以更改边框的方向。

水平-tb：边框水平显示。
垂直-lb：边框垂直显示。

这些在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        #horizontal {
            inline-size: 200px;
            padding: 10px;
            writing-mode: horizontal-tb;
            border-block: 5px dashed red;
        }

        #vertical {
            inline-size: 200px;
            padding: 10px;
            writing-mode: vertical-rl;
            border-block: 5px dashed green;
        }
    </style>
</head>
<body>
    <h2>CSS border-block property</h2>
    <div>
        <p id="horizontal">This example shows the
        horizontal boder.</p>
    </div>
    <div>
        <p id="vertical"> This example shows the 
        vertical border.</p>
    </div>
</body>
</html>

支持的浏览器

属性
border-block	87.0	87.0	66.0	14.1	73.0

css_properties_reference.htm

打印页面