radial-gradient функциясы

radial-gradient функциясы радиалды градиентті орнатады. Бұл функция фон суретін орнататын қасиеттерге қолданылады: background, background-image немесе шекара суретін: border-image, background-image-source.

Синтаксис

селектор {
	background: radial-gradient([пішін түрі орналасуы], түс1 өлшем1, түс2 өлшем2...);
}

Мәндері

Мәні	Сипаттама
пішін	Қабылданатын мәндер: `ellipse` эллипстік градиент (әдепкі бойынша), `circle` дөңгелек градиент.
түрі	Градиенттің созылуын орнатады. Қабылданатын мәндер: `closest-side`, `closest-corner`, `farthest-side`, `farthest-corner`.
орналасуы	`at` кілт сөзінен кейін орналасу кез келген өлшем бірліктерінде немесе кілт сөздері арқылы `top`, `bottom`, `left`, `right`, `center` әртүрлі комбинацияларда көрсетіледі.
түс1	Градиенттің бастапқы түсі кез келген түс бірліктерінде.
түс2	Градиенттің соңғы түсі кез келген түс бірліктерінде.
өлшемі	Градиенттің белгілі бір түсінің ұзындығын кез келген өлшем бірліктерінде орнатады.

Түрі үшін мәндер

Мәні	Сипаттама
`closest-side`	Градиент пішіні оған ең жақын блок жағымен сәйкес келеді.
`closest-corner`	Градиент пішіні блоктың ең жақын бұрышына дейінгі қашықтық туралы ақпарат негізінде есептеледі.
`farthest-side`	Градиент блоктың ең алыс жағына дейін таралады.
`farthest-corner`	Градиент пішіні блоктың ең алыс бұрышына дейінгі қашықтық туралы ақпарат негізінде есептеледі.

Ескерту

Түрі мен пішінін орындарымен ауыстыруға болады, бірақ орналасуы бірінші параметрдің соңында болуы керек. Градиент түрі мен оның өлшемі бір-бірімен жұмыс істемейді (олар қайшылықтасады). Өлшемі басым болады.

Мысал . Ең қарапайым нұсқа

Бастапқы және соңғы түсті қарапайым орнатайық:

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

#elem {
	background: radial-gradient(red, blue);
	width: 200px;
	height: 200px;
}

Мысал . Орналасуын қосамыз

Орталықтың орналасуын орнатайық: 30px - сол жақтан шегініс, 100px - жоғарыдан шегініс:

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

#elem {
	background: radial-gradient(at 30px 100px, red, blue);
	width: 200px;
	height: 200px;
}

Мысал . Пайызбен орналасуы

Орталықтың орналасуын пайызбен орнатайық: 30% - сол жақтан шегініс, 50% - жоғарыдан шегініс:

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

#elem {
	background: radial-gradient(at 30% 50%, red, blue);
	width: 200px;
	height: 200px;
}

Мысал . Кілт сөзбен орналасуы

top, bottom, left, right, center кілт сөздерін қолдануға болады. Мысалы, градиентті оң жақта ортаға орнатайық:

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

#elem {
	background: radial-gradient(at right center, red, blue);
	width: 200px;
	height: 200px;
}

Мысал . Градиент өлшемі

Бұл жағдайда градиент келесідей жұмыс істейді: 0px-ден 20px-ге дейін таза қызыл түс болады, 20px-ден 60px-ге дейін - градиент қызылдан көкке дейін, 60px-ден кейін - таза көк түс:

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

#elem {
	background: radial-gradient(red 20px, blue 60px);
	width: 200px;
	height: 200px;
}

Мысал . Бірнеше түс қатарынан

Бұл жағдайда градиент келесідей жұмыс істейді: 0px-ден 20px-ге дейін таза қызыл түс болады, 20px-ден 40px-ге дейін таза көк түс болады, 40px-ден 60px-ге дейін - градиент көктен жасылға дейін, 60px-ден кейін - таза жасыл түс:

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

#elem {
	background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
	width: 200px;
	height: 200px;
}

Мысал . Өлшемі + орналасуы

Әр түрлі түстер үшін өлшемдерді және градиент орталығының орналасуын бір уақытта орнатайық:

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

#elem {
	background: radial-gradient(at 30px 60px, red 20px, blue 60px);
	width: 200px;
	height: 200px;
}

Мысал . Градиент пішіні

Градиент пішіні бірінші параметрмен орнатылады және 2 мәнін қабылдай алады: circle (дөңгелек градиент) немесе ellipse (эллипстік градиент, әдепкі бойынша). Неге біз осыған дейін эллипстік градиенттерді көрген жоқпыз, бірақ ол әдепкі бойынша орнатылған? Себебі осыған дейін блоктар пішіні шаршы болды. Егер біз пішінді тікбұрышты етсек, онда эллипстік градиентті көреміз:

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

#elem {
	background: radial-gradient(red 20px, blue 60px);
	width: 300px;
	height: 200px;
}

Мысал . Дөңгелек градиент

Тікбұрышты блокта дөңгелек градиент жасайық. Ол үшін градиент пішінін circle кілт сөзі арқылы орнатайық:

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

#elem {
	background: radial-gradient(circle, red 20px, blue 60px);
	width: 300px;
	height: 200px;
}

Мысал . Орналасуын қосамыз

Алдыңғы кодқа градиенттің орналасуын қосамыз:

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

#elem {
	background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
	width: 300px;
	height: 200px;
}

Мысал . farthest-corner түрі + circle

Градиент пішіні блоктың ең алыс бұрышына дейінгі қашықтық туралы ақпарат негізінде есептеледі:

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

#elem {
	background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Мысал . farthest-corner түрі + ellipse

Градиент пішіні блоктың ең алыс бұрышына дейінгі қашықтық туралы ақпарат негізінде есептеледі:

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

#elem {
	background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Мысал . farthest-side түрі + circle

Градиент блоктың ең алыс жағына дейін таралады:

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

#elem {
	background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Мысал . farthest-side түрі + ellipse

Градиент блоктың ең алыс жағына дейін таралады:

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

#elem {
	background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Мысал . closest-corner түрі + circle

Градиент пішіні блоктың ең жақын бұрышына дейінгі қашықтық туралы ақпарат негізінде есептеледі:

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

#elem {
	background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Мысал . closest-corner түрі + ellipse

Градиент пішіні блоктың ең жақын бұрышына дейінгі қашықтық туралы ақпарат негізінде есептеледі:

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

#elem {
	background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Мысал . closest-side түрі + circle

Градиент пішіні оған ең жақын блок жағымен сәйкес келеді:

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

#elem {
	background: radial-gradient(circle closest-side at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Мысал . closest-side түрі + ellipse

Градиент пішіні оған ең жақын блок жағымен сәйкес келеді:

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

#elem {
	background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Сондай-ақ қараңыз

linear-gradient функциясы,
ол сызықты градиент жасайды
repeating-linear-gradient функциясы,
ол қайталанатын сызықты градиент жасайды
repeating-radial-gradient функциясы,
ол қайталанатын радиалды градиент жасайды