CSS - border-block 属性
CSS border-block 属性是一个简写属性，用于一次性为 border-block-color、border-block-style 和 border-block-width 赋值。border-block-style 是必需参数。如果未指定其他参数，则使用默认值。该属性取决于由 writing mode 确定的块方向。
语法
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 属性的 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-color 属性，这是 border-block 属性的组件。在下面的示例中，我们为 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，颜色为 green。
示例
<!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>
结合书写模式设置边框块
在边框上下文中，writing-mode 会影响边框的方向。默认情况下，边框水平显示，但是通过更改书写模式，可以改变边框的方向。
- 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 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_reference.htm