CSS border-block-color egenskap

Föregående sida border-block
Nästa sida border-block-end

Definition och användning

border-block-color Ställ in elementets kantfärg i blockriktningen.

Observera:För att göra border-block-color Egenskapen aktiveras, måste ställas in border-block-style.

border-block-color Egenskapens värde kan ställas in på olika sätt:

Om border-block-color Egenskaper har två värden:

border-block-color: pink lightblue;

Kantfärgen vid början av blocket är pink
Kantfärgen vid slutet av blocket är lightblue

Om border-block-color Egenskapen har ett värde:

border-block-color: pink;

Kantfärgen vid början och slutet av blocket är pink

CSS border-block-color egenskaperna är lika med border-bottom-color,border-left-color,border-right-color och border-top-color Egenskaperna är mycket lika, men border-block-color Egenskapen är beroende av blockriktningen.

Observera:relaterade CSS-egenskaper writing-mode Definierar blockriktningen. Detta påverkar start- och slutpositionen för blocken samt border-block-color Resultatet av egenskapen. För engelska sidor är inlinningsriktningen från vänster till höger, blockriktningen är neråt.

Exempel

Exempel 1

Ställ in färg för kant i blockriktningen:

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

Prova själv

Exempel 2: Kombinera writing-mode-egenskapen

Start- och slutpositionen för kantfärgen i blockriktningen påverkas av writing-mode-egenskapen:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde	Beskrivning
color	Specificera kantfärg. Standardfärgen är elementets nuvarande färg. Se CSS-färgvärden för att få en fullständig lista över färgvärden.
transparent	Specificera att kantfärgen bör vara genomskinlig.
initial	Sätt detta egenskap till dess standardvärde. Se till: initial.
inherit	Följ från föräldrelementet detta egenskap. Se till: inherit.

Tekniska detaljer

Standardvärde:	Elementets nuvarande färg
Ärvnad:	Nej
Animeringsproduktion:	Stöds. Se till:Animeringsrelaterade egenskaper.
Version:	CSS3
JavaScript-syntax:	object.style.borderBlockColor="pink"