Gradienty promieniowe pokazują przejściowy wpływ kolorów w eliptycznym lub okrągłym kształcie. Gradient promieniowy zaczyna się od jednego punktu, który zwykle jest środkiem koła lub elipsy, a następnie gładki efekt przejścia jest rozłożony wokół tego punktu środkowego.

Gradient promieniowy można utworzyć za pomocą funkcji promieniowej () w CSS. Jednak CSS pozwala stworzyć powtarzający się gradient promieniowy za pomocą funkcji powtarzającej się-promieniowo-gradient (). Ten artykuł zawiera opisowy przewodnik na temat gradientów promieniowych i pokazuje zestaw przykładów, które pokazują tworzenie gradientów promieniowych w różnych scenariuszach.

Jak tworzyć gradienty promieniowe w CSS

Aby utworzyć gradient promieniowy, musisz postępować zgodnie z podaną poniżej składnią.

Image tła: gradient promieniowy (rozmiar kształtu w pozycji, Color1, Color2,…)

W powyższej składni,

Parametr kształtu oznacza kształt gradientu i akceptuje Koło lub elipsa (domyślnie). Parametr pozycji definiuje pozycję gradientu. Domyślna wartość parametru pozycji to Centrum. Color1, Color2 reprezentuje kolory używane do gradientu i w kolorach, możesz określić procent zatrzymania dla każdego koloru, e.G., Czerwony 10%.

Wreszcie Parametr rozmiaru Opisuje rozmiar kształtu końcowego gradientu, a jego wartość może być jednym z poniższych:

• najbliższe: Aby rozmiar gradientu, tak, aby spełniał najbliższą stronę swojego centrum
• najbliższy rogernator: gradient spotyka najbliższy róg
• najdalszy: gradient spotyka się z najdalszą stroną
• Dalej-corner (wartość domyślna): gradient ma rozmiar w sposób, w jaki spotyka się z najdalej krajem

Przećwiczmy je, aby stworzyć gradient promieniowy o wielu właściwościach.

Przykład 1: Gradient promieniowy z domyślnymi parametrami

W tym przykładzie tworzono gradient promieniowy z wartościami parametrów domyślnych.

Html

Gradient promieniowy

CSS

Z powyższego kodu można zaobserwować, że zdefiniowane są tylko kolory gradientu. Kryteria kształtu, pozycji i kolorów nie są tutaj zdefiniowane.

Wyjście

Z wyjścia obserwuje się, że gradient pochodzi z centrum (ponieważ jest to pozycja domyślna) i rozprzestrzenia się w elipsie (wartość domyślna).

Przykład 2: Dostosowany gradient promieniowy

Ten przykład pokazuje tworzenie gradientu promieniowego z dostosowanym zestawem wartości parametrów.

Html

Gradient promieniowy

CSS

div
Wysokość: 200px;
Imaga tła: gradient promieniowy (okrąg najbliżej 20%, czerwony, zielony, pomarańczowy);

Powyższy kod CSS tworzy gradient promieniowy, który zawiera następujące właściwości:

• Styl kształtu jest ustawiony na okrążenie
• Kształt zakończenia gradientu jest zdefiniowany przez najbliższe
• Położenie początkowe gradientu jest ustawione na 20% (domyślnie jest wyrównana jako środkowa)

Wyjście

Wyjście pokazuje, że gradient pochodzi z zestawu pozycji do 20% (całkowitej długości gradientu). Ponadto kształt gradientu kończy się na najbliższej stronie od środka, a zatem ostatni kolor (pomarańczowy) rozprzestrzenia się wokół całego kształtu, gdy gradient kończy się.

Przykład 3: Powtarzanie gradientu promieniowego

Funkcja powtarzającego się-promieniowo-gradienta () pozwala na powtarzający się efekt gradientu promieniowego. Ćwiczono następujący kod, aby uzyskać efekt powtarzający się liniowo-gradient ().

Html

Gradient promieniowy

CSS

W powyższym kodzie CSS funkcja powtarzającego się promieniowania (gradient () tworzy gradient, który ma efekt przejścia okrągłego z zatrzymaniem zielonego koloru na poziomie 5%, a pomarańczowy kolor na 10%.

Wyjście

Z powyższego wyjścia gradient promieniowy jest powtarzany przy każdym powtórzeniu zawierającym te same właściwości.

Wniosek

Gradient promieniowy w CSS tworzy efekty przejściowe w postaci koła lub elipsy. Funkcja promieniowo-gradient () w CSS umożliwia utworzenie gradientu promieniowego o różnych właściwościach. Gradient promieniowy pochodzi z punktu i może być rozszerzony w kształcie koła lub elipsy. Oprócz tego funkcja powtarzającego się-promieniowo-gradienta () pozwala dodawać powtarzające się linie gradientu. W tym przewodniku praktykowaliśmy zestaw przykładów, które pokazują użycie promieniowo-gradientu () i powtarzającego się-promieniowego gradientu () w celu stworzenia gradientu promieniowego o różnych właściwościach.