Css 简明教程

CSS - border-block Property

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

Syntax

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

Property Values

Value

Description

border-block-width

它指定块方向的边框宽度。默认值为中等。

border-block-style

它指定块方向边框的样式。默认值为无。

border-block-color

它指定块方向边框的颜色。默认值为文本的颜色。

initial

这会将属性设为其默认值。

inherit

这会从父元素继承属性。

Examples of CSS Border Block Property

以下示例将解释带不同值 border-block 属性。

Setting the Width of Border

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

Example

<!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>

Setting the Style of Border

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

Example

<!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>

Setting the Color of Border

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

Example

<!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>

Setting all Values at Once

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

Example

<!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>

Setting Border Block with Writing Mode

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

  1. Horizontal-tb: border appears horizontally.

  2. Vertical-lb: border appears vertically.

它们显示在以下示例中。

Example

<!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>

Supported Browsers