Funkcja repeating-radial-gradient

Funkcja repeating-radial-gradient ustawia powtarzający się gradient promienisty. Oznacza to, że definiujemy określony wzór gradientu, na przykład od 0px do 10px - gradient od czerwonego do niebieskiego i ten gradient będzie powtarzany na całym bloku: 0px do 10px, od 10px do 20px, od 20px do 30px i tak dalej.

Funkcja działa z tymi samymi parametrami, co radial-gradient, różnica polega tylko na efekcie powtarzania. Przyjmowane parametry można znaleźć w opisie radial-gradient.

Składnia

cssselektor {
  background: repeating-radial-gradient([kształt typ pozycja], kolor1 rozmiar1, kolor2 rozmiar2...);
}

Przykład

Koncentryczne okręgi:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(circle at center, red 0px, red 2px, white 2px, white 4px);
  width: 400px;
  height: 200px;
}

Результат:

Przykład

Koncentryczne elipsy:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(ellipse at center, red 0px, red 4px, white 4px, white 8px);
  width: 400px;
  height: 200px;
}

Результат:

Przykład

Umieśćmy koncentryczne okręgi nie na środku, a z boku:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(circle at 50px 100px, red 0px, red 2px, white 2px, white 4px);
  width: 400px;
  height: 200px;
}

Результат:

Zobacz też