Funkcja CSS repeating-conic-gradient()

Definicja i użycie

CSS repeating-conic-gradient() Funkcja używana do powtarzającego się konicznego gradientu.

koniczny gradient	powtarzający się koniczny gradient

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

Powtarzający się konusowy gradient:

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

Definiuje powtarzający się konusowy gradient z określonymi punktami startowymi i końcowymi kolorów:

#grad {
  background-image: repeating-conic-gradient(red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

Inny ustawiony początkowy kąt i punkt centralny powtarzający się konusowy gradient:

#grad1 {
  background-image: repeating-conic-gradient(from 10deg at 30% 30%, red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

repeating-conic-gradient([from kąt] pozycja,] stopień koloru, stopień koloru, ...);

Wartość	Opis
from kąt	Opcjonalnie. Cały konusowy gradient obraca się o ten kąt. Domyślna wartość to 0deg.
at pozycja	Opcjonalnie. Określa punkt centralny konusa. Domyślna wartość to center.
stopień koloru, ... , stopień koloru	Kolor końcowy to kolor, który ma być prezentowany w miarę płynnego przejścia między kolorami. Ta wartość składa się z wartości koloru i jednego lub dwóch opcjonalnych miejsc zatrzymania (kąt od 0 do 360 stopni lub procent od 0% do 100%)

Wartość

Opis

from kąt

Opcjonalnie. Cały konusowy gradient obraca się o ten kąt.

Domyślna wartość to 0deg.

at pozycja

Opcjonalnie. Określa punkt centralny konusa.

Domyślna wartość to center.

stopień koloru, ... , stopień koloru

Kolor końcowy to kolor, który ma być prezentowany w miarę płynnego przejścia między kolorami.

Ta wartość składa się z wartości koloru i jednego lub dwóch opcjonalnych miejsc zatrzymania (kąt od 0 do 360 stopni lub procent od 0% do 100%)