box-shadow Özelliği

box-shadow özelliği bir bloğa gölge ekler. Değer olarak özellik, boşlukla ayrılmış 6 parametreyi veya gölgeyi tamamen kaldıran none anahtar kelimesini kabul eder.

Sözdizimi

seçici {
	box-shadow: inset x_kayması y_kayması bulanıklık gölge_boyutu renk;
}

seçici {
	box-shadow: none;
}

Parametreler

Parametre	Açıklama
`inset`	İsteğe bağlı parametre. Belirtilirse, gölge kapsayıcının içinde olur, belirtilmezse dışında olur.
x kayması	Gölgenin X eksenindeki kaymasını belirler. Pozitif değer sağa, negatif değer sola kaydırır.
y kayması	Gölgenin Y eksenindeki kaymasını belirler. Pozitif değer aşağı, negatif değer yukarı kaydırır.
bulanıklık	Gölgenin bulanıklığını belirler. Değer ne kadar büyük olursa, gölge o kadar bulanık olur. İsteğe bağlı parametre. Belirtilmezse gölge keskin olur.
gölge boyutu	Gölgenin boyutunu belirler. Pozitif değer gölgeyi genişletir, negatif değer ise onu daraltır. İsteğe bağlı parametre. Belirtilmezse gölge, öğeyle aynı boyutta olur.
renk	Gölgenin rengini, renk için herhangi bir renk biriminde belirler. İsteğe bağlı parametre. Belirtilmezse gölgenin rengi metin rengiyle aynı olur.

Eksenlerdeki kaymalar, bulanıklık ve gölge boyutu, yüzde birimi dışındaki herhangi bir boyut biriminde belirtilebilir.

Örnek

Bu örnekte, gölge aşağı ve sağa kaydırılmış ve küçük bir bulanıklık eklenmiştir:

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

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

Örnek . Keskin Gölge

Bu örnekte, gölge aşağı ve sağa kaydırılmış, ancak bulanıklık yoktur (gölge keskin olacaktır):

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

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

Örnek . Düzgün Gölge

Bu örnekte, gölge kaydırılmamış, ancak bulanıklık eklenmiştir:

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

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

Örnek . Gölge Boyutu

Bu örnekte, gölge kaydırılmamış, bulanıklık sıfırdır, ancak boyut eklenmiştir (siyah sınır, kırmızı ise gölgedir):

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

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

Örnek . Bulanıklık + Gölge Boyutu

Bu örnekte, gölge kaydırılmamış, ancak bulanıklık ve boyut eklenmiştir (siyah sınır, kırmızı ise gölgedir):

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

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

Örnek . İç Gölge

Bu örnekte, gölge kapsayıcının içindedir:

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

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

Ayrıca Bakınız

metne gölge ekleyen text-shadow özelliği