Blok düzeyindeki öğelerin (div'ler gibi) gölgelerini oluşturmada kullanılır.
.shadow ( -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; )- Gölgenin yatay uzaklığı , pozitif, gölgenin kutunun sağında olacağı anlamına gelir, negatif bir sapma gölgeyi kutunun soluna koyar.
- Gölgenin dikey uzaklığı , negatif olan, kutu gölgesinin kutunun üstünde olacağı anlamına gelir, pozitif olan ise gölgenin kutunun altında olacağı anlamına gelir.
- Bulanıklık yarıçapı (isteğe bağlı), 0 olarak ayarlanırsa gölge keskin olur, sayı ne kadar yüksekse o kadar bulanık olur.
- Yayılma yarıçapı (isteğe bağlı), pozitif değerler gölgenin boyutunu artırır, negatif değerler boyutu azaltır. Varsayılan 0'dır (gölge bulanıklıkla aynı boyuttadır).
- Renk
Misal
İç gölge
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Misal
Internet Explorer Kutusu Gölgesi
Ekstra öğelere ihtiyacınız var…
Box-shadowed element .shadow1 ( margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); box-shadow: 5px 5px 5px rgba(68,68,68,0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; ) .shadow1 .content ( position: relative; /* This protects the inner element from being blurred */ padding: 100px; background-color: #DDD; )Yalnızca Tek Taraflı
Negatif bir yayılma yarıçapı kullanarak, bir kutu gölgesinde sıkışabilir ve onu yalnızca bir kutunun bir kenarından itebilirsiniz.
.one-edge-shadow ( -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; )İlişkili
- CSS3: değeri ve kutu gölgesini yalnızca bir tarafa yayma
- Mozilla Belgeleri
- Çoklu Kenarlıklar
box-shadow.