Css 简明教程

CSS - border-block Property

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

CSS border-block property is a shorthand property for assigning values to border-block-color, border-block-style and border-block-width in one go. The border-block-style is required parameter. If other parameters are not mentioned then default values will be used. This property depends on the direction of the block which is determined by the writing mode.

Syntax

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

Property Values

Value

Description

border-block-width

It specifies the width of the border in the block direction. Default is medium.

border-block-style

It specifies the style of the border in the block direction. Default is none.

border-block-color

It specifies the color of the border in the block direction. Default is text’s color.

initial

This sets the property to its default value.

inherit

This inherits the property from the parent element.

Examples of CSS Border Block Property

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

The following examples explain the border-block property with different values.

Setting the Width of Border

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

To set the width of the border, we use the border-block-width component of the border-block property. In the following example, we have used 'thick' and 10px width for border-block-width property.

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 属性的“实线”和“虚线”样式。

To set the style of the border, we use the border-block-style component of the border-block property. In the following example, we have used 'solid' and 'dashed' styles for border-block-style property.

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 属性的“红”和“蓝”颜色。

To set the color of the border, we use the border-block-color component of the border-block property. In the following example, we have used 'red' and 'blue' colors for border-block-color property.

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，样式为虚线，颜色为绿色。

To set the values of width, style and color at once, we can simply use the border-block property by providing all the values at once. In the following example, the width has been taken as 5px, style as dashed and color as green.

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 影响边框的方向。默认情况下，边框按水平显示，但是通过更改书写模式，可以更改边框的方向

The writing-mode in the context of border-block influences the direction of the border. By default, the border appears horizontally, however by changing the writing mode, the border’s direction can be changed

  1. Horizontal-tb: border appears horizontally.

  2. Vertical-lb: border appears vertically.

它们显示在以下示例中。

These are shown in the following example.

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