Box-shadow xassəsi

box-shadow xassəsi bloka kölgə təyin edir. Xassə qiymət kimi 6 parametr qəbul edir, boşluqla ayrılan, ya da none açar sözünü, kölgəni tamamilə ləğv edən.

Sintaksis

selektor {
	box-shadow: inset x_uzrə_sürüşmə y_uzrə_sürüşmə bulanıqlıq kölgə_ölçüsü rəng;
}

selektor {
	box-shadow: none;
}

Parametrlər

Parametr	Təsvir
`inset`	İxtiyari parametr. Əgər verilibsə, kölgə konteynerin içində olacaq, əgər verilməyibsə - xaricində.
x uzrə sürüşmə	Kölgənin X oxu üzrə yerdəyişməsini təyin edir. Müsbət qiymət sağa, mənfi - sola sürüşdürür.
y uzrə sürüşmə	Kölgənin Y oxu üzrə yerdəyişməsini təyin edir. Müsbət qiymət aşağı, mənfi - yuxarı sürüşdürür.
bulanıqlıq	Kölgənin bulanıqlığını təyin edir. Qiymət nə qədər böyük olarsa, kölgə bir o qədər bulanıq olar. İxtiyari parametr. Əgər verilməyibsə - kölgə aydın olacaq.
kölgə ölçüsü	Kölgənin ölçüsünü təyin edir. Müsbət qiymət kölgəni uzadır, mənfi qiymət isə, əksinə, onu sıxır. İxtiyari parametr. Əgər verilməyibsə - kölgə elementlə eyni ölçüdə olacaq.
rəng	Kölgənin rəngini istənilən rəng vahidlərində təyin edir. İxtiyari parametr. Əgər verilməyibsə - kölgənin rəngi mətnin rəngi ilə eyni olacaq.

Oxlar üzrə yerdəyişmələr, bulanıqlıq və kölgə ölçüsü faidlər istisna olmaqla, istənilən ölçü vahidlərində təyin oluna bilər.

Nümunə

Bu nümunədə kölgə aşağı və sağa sürüşdürülüb və kiçik bir bulanıqlıq əlavə olunub:

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

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

Nümunə . Aydın kölgə

Bu nümunədə kölgə aşağı və sağa sürüşdürülüb, amma bulanıqlıq yoxdur (kölgə aydın olacaq):

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

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

Nümunə . Vahid kölgə

Bu nümunədə kölgə sürüşdürülməyib, amma ona bulanıqlıq əlavə olunub:

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

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

Nümunə . Kölgə ölçüsü

Bu nümunədə kölgə sürüşdürülməyib, bulanıqlıq sıfıra bərabərdir, amma ona ölçü əlavə olunub (qara - sərhəd, qırmızı - kölgə):

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

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

Nümunə . Bulanıqlıq + kölgə ölçüsü

Bu nümunədə kölgə sürüşdürülməyib, amma ona bulanıqlıq və ölçü əlavə olunub (qara - bu sərhəd, qırmızı - bu kölgə):

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

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

Nümunə . Daxili kölgə

Bu nümunədə kölgə konteynerin içində yerləşir:

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

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

Həmçinin bax

text-shadow xassəsi,
bu mətnə kölgə təyin edir