CSS border-block-breedte eigenschap

Definition and usage

gerelateerde CSS-eigenschappen Set the border width of the element for the property on the block direction.

Zeer vergelijkbaar, maarTo make gerelateerde CSS-eigenschappen The property must be set for it to take effect: border-block-style.

gerelateerde CSS-eigenschappen The value of the property can be set in different ways:

De breedte van de rand aan het begin van de blokken is 10px gerelateerde CSS-eigenschappen Properties have two values:

border-block-width: 10px 50px;
  • 块开始处的边框宽度为 10px
  • border-block-width: 10px 50px;

De breedte van de rand aan het begin van de blokken is 10px gerelateerde CSS-eigenschappen De breedte van de rand aan het einde van de blokken is 50px

Stel de breedte van de randen in de blokkenrichting in:
  • Als

De eigenschap heeft een waarde: gerelateerde CSS-eigenschappen De breedte van de randen aan het begin en einde van de blokken is beide 10px CSSborder-bottom-widtheigenschappen zijn vergelijkbaar met CSS-eigenschappenborder-bottom-widthborder-left-width en border-right-width en gerelateerde CSS-eigenschappen border-top-width

Zeer vergelijkbaar, maarDe eigenschap is afhankelijk van de blokkenrichting. Voorbeeld 2: Combinatie van writing-mode eigenschap Opmerking: gerelateerde CSS-eigenschappen Definieert de blokkenrichting. Dit beïnvloedt de begin- en eindposities van de blokken, evenals

border-block-width

Het resultaat van de eigenschap. Voor Engelse pagina's, de inline-richting is van links naar rechts, de blokkenrichting is naar beneden.

Voorbeeld

Voorbeeld 1
  Eigenschap beïnvloedt:
  Stel de breedte van de randen in de blokkenrichting in:
writing-mode: vertical-rl;
#example1 {
  Eigenschap beïnvloedt:
  border-block-width: 10px;
writing-mode: vertical-rl;

border-block-width: 5px;

#example2 {

border-block-width: thin thick; Voorbeeld 2: Combinatie van writing-mode eigenschap De randen aan het begin en einde van de blokken worden beïnvloed door

writing-mode
  Eigenschap beïnvloedt:
  div {
  border-block-style: solid;
writing-mode: vertical-rl;

border-block-width: 5px;

}

Probeer het zelflengthCSS syntaxis

border-block-width: medium|thin|thick|

|initial|inherit; Eigenschapswaarde
medium Waarde
Beschrijving specificeer een gemiddelde rand. Standaardwaarde.
specificeer een dunne rand. Specificeer een dikke rand.
length Laat u toe om de dikte van de rand te definiëren. Raadpleeg:CSS Units.
initial Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit Deze eigenschap overneemt van de ouderlijke element. Raadpleeg inherit.

Technische details

Standaardwaarde: medium
Inheritschap: Nee
Animatieproductie: Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS3
JavaScript syntaxis: object.style.borderBlockWidth="3px 10px"

Browserondersteuning

Tafelgetallen vertegenwoordigen de browserversie die de eigenschap volledig ondersteunt.

Chrome Edge Firefox Safari Opera
87.0 87.0 66.0 14.1 73.0

Gerelateerde pagina's

Handleiding:CSS rand

Referentie:CSS border eigenschap

Referentie:CSS border-block eigenschap

Referentie:CSS border-block-eind-breedte eigenschap

Referentie:CSS border-block-start-breedte eigenschap

Referentie:CSS border-block-stijl eigenschap

Referentie:CSS border-beneden-breedte eigenschap

Referentie:CSS border-links-breedte eigenschap

Referentie:CSS border-rechts-breedte eigenschap

Referentie:CSS border-boven-breedte eigenschap

Referentie:CSS writing-mode eigenschap