Хосияти box-shadow

Хосияти box-shadow сояро ба блок таъин мекунад. Ҳамчун қимат хосият 6 параметрро, ки бо фосила ҷудо карда шудаанд, ё калимаи калиди none-ро қабул мекунад, ки сояро тамоман бекор мекунад.

Синтаксис

интихобкунанда {
	box-shadow: inset ҳаракат_дар_x ҳаракат_дар_y мутаҳаммим кардан андозаи_соя ранг;
}

интихобкунанда {
	box-shadow: none;
}

Параметрҳо

Параметр	Тавсиф
`inset`	Параметри ихтиёрӣ. Агар он муайян карда шавад, соя дар дохили контейнер хоҳад буд, агар муайян карда нашавад - дар берун.
ҳаракат дар x	Ҷойивазкунии сояро дар меҳвари X муайян мекунад. Қимати мусбат ба рост ҳаракат мекунад, манфӣ - ба чап.
ҳаракат дар y	Ҷойивазкунии сояро дар меҳвари Y муайян мекунад. Қимати мусбат ба поён ҳаракат мекунад, манфӣ - ба боло.
мутаҳаммим кардан	Муттаҳаммим шудани сояро муайян мекунад. Қимат чӣ қадар бузургтар бошад, соя ҳамон қадар мутаҳаммимшудатар хоҳад буд. Параметри ихтиёрӣ. Агар муайян карда нашавад - соя равшан хоҳад буд.
андозаи соя	Андозаи сояро муайян мекунад. Қимати мусбат сояро кашиш медиҳад, қимати манфӣ, баръакс, онро фишур медиҳад. Параметри ихтиёрӣ. Агар муайян карда нашавад - соя ҳамон андозаи элемент хоҳад буд.
ранг	Ранги сояро дар ҳар гуна воҳидҳои барои ранг муайян мекунад. Параметри ихтиёрӣ. Агар муайян карда нашавад - ранги соя бо ранги матн мувофиқат мекунад.

Ҷойивазкуниҳо дар меҳварҳо, мутаҳаммим кардан ва андозаи соя дар ҳар гуна воҳидҳои барои андоза, ба истиснои фоиз, муайян карда мешаванд.

Намуна

Дар ин намуна соя ба поён ва рост ҳаракат карда шудааст ва мутаҳаммим кардани хурд илова шудааст:

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

#elem {
	box-shadow: 5px 5px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Намуна . Сояи равшан

Дар ин намуна соя ба поён ва рост ҳаракат карда шудааст, аммо мутаҳаммим кардан вуҷуд надорад (соя равшан хоҳад буд):

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

#elem {
	box-shadow: 2px 2px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Намуна . Сояи баробар

Дар ин намуна соя ҳаракат накардааст, аммо ба он мутаҳаммим кардан илова шудааст:

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

#elem {
	box-shadow: 0px 0px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Намуна . Андозаи соя

Дар ин намуна соя ҳаракат накардааст, мутаҳаммим кардан ба сифр баробар аст, аммо ба он андоза илова шудааст (сиёҳ - ин ҳудуд, сурх - ин соя):

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

#elem {
	box-shadow: 0 0 0 3px red;
	border: 3px solid black;
	width: 300px;
	height: 50px;
}

Намуна . Мутаҳаммим кардан + андозаи соя

Дар ин намуна соя ҳаракат накардааст, аммо ба он мутаҳаммим кардан ва андоза илова шудааст (сиёҳ - ин ҳудуд, сурх - ин соя):

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

#elem {
	box-shadow: 0 0 3px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Намуна . Сояи дохилӣ

Дар ин намуна соя дар дохили контейнер ҷойгир аст:

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

#elem {
	box-shadow: inset 0 0 6px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Инчунин нигаред

хосияти text-shadow,
ки сояро ба матн таъин мекунад