CSS border-block-kleur eigenschap

Vorige pagina border-block
Volgende pagina border-block-end

Definitie en gebruik

border-block-color de eigenschap in te stellen voor de randkleur van het element in de blokkenrichting.

Opmerking:Om border-block-color De eigenschap moet worden ingesteld om effectief te zijn border-block-style.

border-block-color De waarde van de eigenschap kan op verschillende manieren worden ingesteld:

Als border-block-color Eigenschappen hebben twee waarden:

border-block-color: pink lightblue;

De randkleur aan het begin van de blok is pink
De randkleur aan het einde van de blok is lightblue

Als border-block-color De eigenschap heeft een waarde:

border-block-color: pink;

De randkleur aan het begin en einde van de blok is pink

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

Opmerking:gerelateerde CSS eigenschappen writing-mode Definieert de blokdirection. Dit beïnvloedt de start- en eindpunten van de blokken en border-block-color Het resultaat van de eigenschap. Voor Engelse pagina's, de inline-direction is van links naar rechts, de blokdirection is naar beneden.

Voorbeeld

Voorbeeld 1

Stel de kleur van de rand in voor de blokdirection:

#example1 {
  border-block-style: solid;
  border-block-color: pink;
}
#example2 {
  border-block-style: solid;
  border-block-color: pink lightblue;
}

Probeer het zelf

Voorbeeld 2: Samen met de writing-mode eigenschap

De start- en eindpunten van de randkleur in de blokdirection zijn beïnvloed door de writing-mode eigenschap:

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

Probeer het zelf

CSS syntaxis

border-block-color: color|transparent|initial|inherit;

Eigenschapswaarde

Waarde	Beschrijving
color	Specificeer de randkleur. De standaardkleur is de huidige kleur van het element. Bekijk de CSS-kleurenwaarden voor een volledige lijst van kleuren.
transparent	Specificeer de randkleur moet transparant zijn.
initial	Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit	Inherit deze eigenschap van het ouder-element. Raadpleeg inherit.

Technische details

Standaardwaarde:	De huidige kleur van het element
Inheritantie:	Nee
Animatie maken:	Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS3
JavaScript syntaxis:	object.style.borderBlockColor="pink"