Przebieg promienisty CSS

Przebieg promienisty CSS

Gradient radialny jest zdefiniowany przez jego środek.

Aby utworzyć gradient radialny, musisz również zdefiniować co najmniej dwa znaczniki kolorów.

语法

background-image: radial-gradient(shape size at position, start-color, ... , last-color);

domyślnieshape dla elipsysize dla najdalszego kątaposition w centrum.

Gradient radialny - równomiernie rozłożone znaczniki kolorów (domyślne)

Poniższy przykład pokazuje gradient radialny z równomiernymi odstępami między znacznikami kolorów:

Przykład

#grad {
  background-image: radial-gradient(red, yellow, green);
}

Spróbuj sam

Gradient radialny - różne odstępy między znacznikami kolorów

Poniższy przykład pokazuje gradient radialny, w którym odstępy między znacznikami kolorów są różne:

Przykład

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

Spróbuj sam

Ustawienie kształtu

shape Parametr definiuje kształt. Akceptuje wartości circle lub ellipse. Domyślną wartością jest ellipse (ellipse).

Poniższy przykład pokazuje okrągły gradient radialny:

Przykład

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

Spróbuj sam

Używane są różne klucze rozmiaru

size Parametr definiuje rozmiar gradientu. Akceptuje cztery wartości:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Przykład

Ustawiono różne wartości size dla gradientów radialnych:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

Spróbuj sam

Powtarzający się gradient radialny

repeating-radial-gradient() Funkcja używana do powtarzających się gradientów radialnych:

Przykład

Powtarzający się gradient radialny:

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

Spróbuj sam

Atrybuty gradientów CSS

Poniższa tabela zawiera atrybuty gradientów CSS:

Właściwość Opis
background-image Ustawienie jednego lub kilku obrazów tła dla elementu.