Hisia hiki ya CSS border-block

定义和用法

border-block 属性是以下属性的简写：

如果省略颜色或宽度的值，则将使用默认值。

CSS border-block 属性与 border 属性非常相似，但 border-block 属性依赖于块方向。

注意：相关的 CSS 属性 writing-mode 定义了块方向。这会影响块的起点和终点位置以及 border-block 属性的结果。对于英文页面，行内方向是从左到右，块方向是向下。

实例

例子 1

为块方向上不同元素的边框设置样式、颜色和宽度：

h1 {
  border-block: 5px solid red;
}
h2 {
  border-block: 4px dotted blue;
}
div {
  border-block: double;
}

亲自试一试

例子 2：结合 writing-mode 属性

块方向上起始和结束边框的位置受 writing-mode 属性影响：

div {
  writing-mode: vertical-rl;
  border-block: hotpink dashed 8px;
}

亲自试一试

CSS 语法

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 将此属性设置为其默认值。参阅 initial.
inherit 从其父元素继承此属性。参阅 inherit.

Mifano ya habari ya teknolojia

Chaguo cha kuzingatia: kati kina kina muda wa uharibifu
Kuzikondoa: Hakuna
Uharibifu wa mafuta: Inaendelea:Mafuta ya hali ya uharibifu.
Mwaka: CSS3
Inayofikia KiJavaScript: object.style.borderBlock="dashed hotpink 10px"

Matumizi ya kifaa kusoma

Mafupaji ya tabia hii inaeleza na toka ya kufaa kwa programu ya kusoma kwa kifaa kina inayosukumwa kabla ya kufikiria tabia hii.

Chrome Edge Firefox Safari Opera
87.0 87.0 66.0 14.1 73.0

Vipengele vya vingine

Mafunzo:CSS eneu

Tunakitegemea:Hisia hiki ya CSS border

Tunakitegemea:Hisia hiki ya CSS border-block-color

Tunakitegemea:Hisia hiki ya CSS border-block-style

Tunakitegemea:Hisia hiki ya CSS border-block-width

Tunakitegemea:CSS writing-mode mafuta