Kutulara Gölge Vermek (box-shadow)

Yapısı : box-shadow: (değer) Aldığı Değerler : none | (gölge) [ , (gölge) ] Başlangıç değeri: tanımlama yokUygulanabilen elementler: tüm elementler Kalıtsallık:Yok

.golgeliKutu {
  box-shadow: 3px 3px 4px #000;
}

Değerler metinlere gölge verme (text-shadow) özelliği ile aynı anlamı taşır.

3px; İlk değer yataydaki mesafe içindir. Artı değerler kutunun sağından itibaren uzaklık değeridir, negatif değerler kutunun soluna doğru mesafeyi gösterir.

3px; İkinci değer dikeydeki mesafe içindir. Artı değerler kutunun altına doğru mesafeyi gösterir, eksi değerler ise kutunun üstüne doğru mesafesini gösterir.

4px; Bulanıklık(blur) değeridir. Gölgelerin gerçeğe yaklaşması için kullanılır. Bulanık yatay ve dikey için verilen değerler göre şekil alır.

#000; renk değeri. Gölgenin renk değerini gösterir.

Farklı tarayıcılar için ön ek kullanılarak çözüm üretilir. -moz Firefox için, -webkit Safari ve Google Chrome için.

.golgeliKutu {
   box-shadow: 3px 3px 4px #000;
   -moz-box-shadow: 3px 3px 4px #000;
   -webkit-box-shadow: 3px 3px 4px #000;
 }