funkcja repeating-linear-gradient() w CSS

Poprzednia strona Funkcja CSS repeating-conic-gradient()
Następna strona Funkcja CSS repeating-radial-gradient()
Wróć do poprzedniego poziomu Podręcznik referencyjny funkcji CSS

definicja i użycie

CSS repeating-linear-gradient() funkcja do powtarzającej się liniowej gradient.

Przykład:

liniowy gradient	powtarzająca się liniowa gradient

linear-gradient(red, yellow, blue);	repeating-linear-gradient(red, yellow 10%, blue 20%);

przykład

Przykład 1

Powtarzający się liniowy gradient:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Spróbuj sam!

Przykład 2

Różne powtarzające się liniowe gradienty:

#grad1 {
  background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%);
}
#grad2 {
  background-image: repeating-linear-gradient(190deg, red, blue 7%, green 10%);
}
#grad3 {
  background-image: repeating-linear-gradient(90deg, red, blue 7%, green 10%);
}

Spróbuj sam!

Gramatyka CSS

repeating-linear-gradient(angle do side-or-corner, color-stop1, color-stop2, ...);

Wartość	Opis
angle	Definiuje kąt kierunku gradientu. Od 0deg do 360deg. Domyślna wartość to 180deg.
side-or-corner	Definiuje pozycję startową linii gradientu. Składa się z dwóch kluczy: pierwszego oznaczającego kierunek poziomy (left lub right), drugiego oznaczającego kierunek pionowy (top lub bottom). Kolejność nie ma znaczenia, a każdy klucz jest opcjonalny.
color-stop1, color-stop2,...	Punkty końcowe kolorów to kolory, które mają być wyświetlane w miarę przejścia pomiędzy nimi. Ta wartość składa się z wartości koloru i jednego lub dwóch opcjonalnych pozycji zatrzymania (procenty między 0% a 100% lub długość wzdłuż osi gradientu).

Wartość

Opis

angle

Definiuje kąt kierunku gradientu. Od 0deg do 360deg. Domyślna wartość to 180deg.

side-or-corner

Definiuje pozycję startową linii gradientu.

Składa się z dwóch kluczy: pierwszego oznaczającego kierunek poziomy (left lub right), drugiego oznaczającego kierunek pionowy (top lub bottom).

Kolejność nie ma znaczenia, a każdy klucz jest opcjonalny.

color-stop1, color-stop2,...

Punkty końcowe kolorów to kolory, które mają być wyświetlane w miarę przejścia pomiędzy nimi.

Ta wartość składa się z wartości koloru i jednego lub dwóch opcjonalnych pozycji zatrzymania (procenty między 0% a 100% lub długość wzdłuż osi gradientu).