Kutu Elemanlarına Damla Gölgeler Ekleme - metin gölgelerine ek olarak kuklalar

Metin gölgelerine ek olarak CSS 3, kutu elemanlarına gölgeler ekleme gücü verir (örneğin, etiketler). Şekilde, Jelly Rancher web sitesinin bu örnek sayfasında, kenara gibi bölümleri devre dışı bırakmak için nasıl gölge gölgelerinin kullanıldığını görüyorsunuz.

Metin gölgesi gibi ilk değer Safari tarayıcısına yatay kaydırmayı, ikincisi dikey kaydırmayı, üçüncü değer de gölgenin bulanıklığını açıklar. Yine, varsayılan 0'dır ve bulanıklığı belirtmezseniz, gölgenin rengi tamamen sağlamdır.

WebKit tarayıcıları için kutu bırak gölgelerinin sözdizimi:

-webkit-box-shadow: yatay dikey bulanıklaştırma rengi;

RGBa rengi, şeffaflık ekleyebileceğiniz için gölgenin görünümü üzerinde daha fazla kontrol sahibi olmanızı sağlar. Benzer şekilde, em ölçümünün kullanılması, metnin boyutu değişirse daha iyi ayarlayan bir gölge oluşturur.

Aşağıdaki stil, bir sayfadaki tüm kutu öğelerine bir gölge etkisi ekler:

Metne, etikete ve diğer öğelere CSS 3 kullanarak açılır gölgeler ekleyebilirsiniz. Div {-webkit-box-shadow:. 15em. 25em. 5em rgba (27, 27, 27, 6);}