CSS - 边框块属性

原创

admin 4个月前 (08-07) 阅读数 20 #CSS

CSS - 边框块属性

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 属性</h2>
    <p id="width1">
        此第一个示例显示了 border-block 的宽度属性，
        使用 thick 值。
    </p>
    <p id="width2">
        此第二个示例显示了 border-block 的宽度属性，
        使用 10px 值。
    </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 属性</h2>
    <p id="style1">
        此第一个示例显示了 border-block 的样式属性，
        使用 solid 值。
    </p>
    <p id="style2">
        此第二个示例显示了 border-block 的样式属性，
        使用 dashed 值。
    </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 属性</h2>
    <p id="color1">
        此第一个示例显示了 border-block 的颜色属性，
        使用 red 值。
    </p>
    <p id="color2">
        此第二个示例显示了 border-block 的颜色属性，
        使用 blue 值。
    </p>
</body>
</html>

一次性设置所有值

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

示例

<!DOCTYPE html>
<html>

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

    </style>
</head>
<body>
    <h2>CSS border-block 属性</h2>
    <p id="block">
        此示例显示了 border-block 属性，
        一次性定义所有值。
    </p>
</body>
</html>

使用书写模式设置边框块

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

Horizontal-tb: 边框水平显示。
Vertical-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 属性</h2>
    <div>
        <p id="horizontal">此示例显示了
        水平边框。</p>
    </div>
    <div>
        <p id="vertical"> 此示例显示了 
        垂直边框。</p>
    </div>
</body>
</html>