Box-shadow xususiyati

box-shadow xususiyati blokga soyani belgilaydi. Xususiyat qiymat sifatida 6 parametrni, bo'shliq bilan ajratilgan holda, yoki none kalit so'zini qabul qiladi, bu soya berilishini butunlay bekor qiladi.

Sintaksis

selector {
	box-shadow: inset x_siljishi y_siljishi tarqalish soyaning_haqi rang;
}

selector {
	box-shadow: none;
}

Parametrlar

Parametr	Ta'rif
`inset`	Ixtiyoriy parametr. Agar u belgilansa, soya konteyner ichida bo'ladi, agar belgilanmagan bo'lsa - tashqarida.
x siljishi	Soyaning X o'qi bo'yicha siljishini belgilaydi. Musbat qiymat o'ngga, manfiy qiymat - chapga siljitadi.
y siljishi	Soyaning Y o'qi bo'yicha siljishini belgilaydi. Musbat qiymat pastga, manfiy qiymat - yuqoriga siljitadi.
tarqalish	Soyaning tarqalishini belgilaydi. Qiymat qancha katta bo'lsa, soya shunchalik tarqoq bo'ladi. Ixtiyoriy parametr. Agar belgilanmagan bo'lsa - soya aniq bo'ladi.
soyaning hajmi	Soyaning hajmini belgilaydi. Musbat qiymat soyani cho'zadi, manfiy qiymat, aksincha, uni siqadi. Ixtiyoriy parametr. Agar belgilanmagan bo'lsa - soya element bilan o'lchami bir xil bo'ladi.
rang	Soyaning rangini har qanday rang birliklari da belgilaydi. Ixtiyoriy parametr. Agar belgilanmagan bo'lsa - soyaning rangi matn rangi bilan bir xil bo'ladi.

O'qlar bo'yicha siljishlar, tarqalish va soyaning hajmi har qanday o'lchov birliklari da belgilanishi mumkin, foizlardan tashqari.

Misol

Ushbu misolda soya pastga va o'ngga siljigan va kichik tarqalish qo'shilgan:

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

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

Misol . Aniq soya

Ushbu misolda soya pastga va o'ngga siljigan, lekin tarqalish yo'q (soya aniq bo'ladi):

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

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

Misol . Bir xil soya

Ushbu misolda soya siljimagan, lekin unga tarqalish qo'shilgan:

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

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

Misol . Soyaning hajmi

Ushbu misolda soya siljimagan, tarqalish nolga teng, lekin unga hajm qo'shilgan (qora - bu chegarasi, qizil - bu soya):

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

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

Misol . Tarqalish + soyaning hajmi

Ushbu misolda soya siljimagan, lekin unga tarqalish va hajm qo'shilgan (qora - bu chegarasi, qizil - bu soya):

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

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

Misol . Ichki soya

Ushbu misolda soya konteyner ichida joylashgan:

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

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

Shuningdek qarang

text-shadow xususiyati,
bu matnga soya beradi