Box-shadow хусусияти

box-shadow хусусияти блокга соя беради. Хусусият қиймат сифатида 6 параметрни, бўшлиқ билан ажратилган, ёки сояни бутунлай бекор қиладиги калит сўз none ни қабул қилади.

Синтаксис

селектор {
	box-shadow: inset x_буйича_силжиш y_буйича_силжиш тарқалиш соя_ҳажми ранг;
}

селектор {
	box-shadow: none;
}

Параметрлар

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

Ўқлар буйича силжишлар, тарқалиш ва соя ҳажми исталган ҳажм учун бирликларда белгиланади, фоизлардан ташқари.

Мисол

Бу мисолда соя пастга ва ўнгга силжитилган ва кичкина тарқалиш қўшилган:

<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 хусусияти,
у матнга соя беради