CSS border-block-start eigenschap

Vorige pagina border-block-end-width
Volgende pagina border-block-start-color

Definitie en gebruik

border-block-start Eigenschappen zijn een afkorting van de volgende eigenschappen:

CSS border-block-start eigenschappen zijn vergelijkbaar met border-bottom、border-left、border-right en border-top De eigenschappen zijn zeer vergelijkbaar, maar border-block-start De eigenschap is afhankelijk van de blokrichting.

Opmerking：gerelateerde CSS eigenschappen writing-mode Definieert de blokrichting. Dit beïnvloedt de start- en eindpositie van de blokken, alsmede border-block-start Resultaat van de eigenschap. Voor Engelse pagina's is de inline richting van links naar rechts, de blokrichting is naar beneden.

Voorbeeld

Voorbeeld 1

Stel de breedte, kleur en stijl van de rand aan de start van de blokrichting in：

div {
  border-block-start: 10px solid pink;
}

Probeer het zelf uit

Voorbeeld 2: Combinatie met de writing-mode eigenschap

De positie van de rand aan de start van de blokrichting wordt beïnvloed door writing-mode Invloed van de eigenschap：

div {
  writing-mode: vertical-rl;
  border-block-start: dotted blue;
}

Probeer het zelf uit

CSS syntaxis

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

Eigenschapswaarde

Waarde	Beschrijving
border-block-start-width	Specificeer de breedte van de rand aan de start van de blokrichting. De standaardwaarde is medium.
border-block-start-style	Specificeer het stijltype van de rand aan de start van de blokrichting. De standaardwaarde is none.
border-block-start-color	Specificeer de kleur van de rand aan de start van de blokrichting. De standaardwaarde is de huidige kleur van de rand.
initial	Stel deze eigenschap in op de standaardwaarde. Raadpleeg initial。
inherit	Deze eigenschap erft van de ouderlijke element. Raadpleeg inherit。

Technische details

Standaardwaarde：	medium none currentcolor
Inheritantie：	Nee
Animatie maken：	Ondersteund. Raadpleeg：Animatiegerelateerde eigenschappen。
Versie：	CSS3
JavaScript syntaxis：	object.style.borderBlockStart="pink dotted 5px"