Atrybut border-block-color CSS

Poprzednia strona border-block
Następna strona border-block-end

Definicja i użycie

border-block-color ustawić kolor ramki atrybutu dla elementu w kierunku blokowym.

Uwaga:Aby border-block-color Atrybut działa, musi być ustawiony border-block-style.

border-block-color Wartość atrybutu można ustawić na różne sposoby:

Jeśli border-block-color Atrybut ma dwie wartości:

border-block-color: pink lightblue;

kolor krawędzi na początku bloku to pink
kolor krawędzi na końcu bloku to lightblue

Jeśli border-block-color Atrybut ma jedną wartość:

border-block-color: pink;

Kolor krawędzi na początku i końcu bloku to pink

CSS border-block-color Atrybuty te są podobne do border-bottom-color,border-left-color,border-right-color i border-top-color Atrybuty są bardzo podobne, ale border-block-color Atrybut zależy od kierunku blokowego.

Uwaga:powiązane atrybuty CSS writing-mode Definiuje kierunek blokowy. To wpływa na pozycję początkową i końcową bloku oraz border-block-color Wynik atrybutu. Dla stron w języku angielskim, kierunek wewnętrzny to od lewej do prawej, a kierunek blokowy to w dół.

Przykład

Przykład 1

Ustawienie koloru krawędzi w kierunku blokowym:

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

Spróbuj sam

Przykład 2: Połączenie atrybutu writing-mode

Pozycja początkowa i końcowa krawędzi w kierunku blokowym jest wpływowana przez atrybut writing-mode:

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

Spróbuj sam

Gramatyka CSS

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

Wartość atrybutu

Wartość	Opis
color	Określ kolor krawędzi. Domyślnym kolorem jest bieżący kolor elementu. Zobacz wartości kolorów CSS, aby uzyskać pełną listę wartości kolorów.
transparent	Określ kolor krawędzi jako przezroczysty.
initial	Ustaw ten atrybut na jego wartość domyślną. Zobacz: initial.
inherit	Przypisz temu atrybutowi wartość domyślną. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość:	Bieżąca kolor elementu
Inheredność:	Nie
Tworzenie animacji:	Obsługiwane. Zobacz:Atrybuty animacji.
Wersja:	CSS3
Gramatyka JavaScript:	object.style.borderBlockColor="pink"