CSS border-block-eind-stijl eigenschap

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

Definitie en gebruik

border-block-end-style kenmerken worden gebruikt om de stijl van de rand van een element aan het einde van de blokkenrichting in te stellen.

CSS border-block-end-style kenmerken en border-bottom-styleenborder-left-styleenborder-right-style en border-top-style Eigenschappen zijn zeer vergelijkbaar, maar border-block-end-style De eigenschap is afhankelijk van de blokkenrichting.

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

Voorbeeld

Voorbeeld 1

Stel de stijl in voor de rand aan het einde van de blokkenrichting:

div {
  border-block-end-style: dotted;
}

Probeer het zelf uit

Voorbeeld 2: Combinatie met de writing-mode eigenschap

De positie van de randstijl aan het einde van de blokkenrichting wordt beïnvloed door writing-mode Invloed van de eigenschap：

div {
  border-block-end-style: solid;
  writing-mode: vertical-rl;
  border-block-end-width: 5px;
}

Probeer het zelf uit

CSS syntaxis

border-block-end-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Eigenschapswaarde

Waarde	Beschrijving
none	Standaardwaarde. Specificeer geen rand.
hidden	Gelijk aan "none", maar verschilt in de oplossing van conflict met randen van tabel-elementen.
dotted	Specificeer een gepuncteerde rand.
dashed	Specificeer een gebroken rand.
solid	Specificeer een doorlopende rand.
double	Specificeer een dubbele rand.
groove	Specificeer een 3D insnoeiende rand. Het effect hangt af van de waarde van border-color.
ridge	Specificeer een 3D golvende rand. Het effect hangt af van de waarde van border-color.
inset	Specificeer een 3D ingesloten rand. Het effect hangt af van de waarde van border-color.
outset	Specificeer een 3D uitstekende rand. Het effect hangt af van de waarde van border-color.
initial	Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial。
inherit	Deze eigenschap erft van de ouder element. Raadpleeg inherit。

Technische details

Standaardwaarde：	none
Inheritantie：	Nee
Animatie maken：	no. Lees over animabele
Versie：	CSS3
JavaScript syntaxis：	object.style.borderBlockEndStyle="dotted"