Değerler ne anlama geliyor?
box-shadow dört sayı ve bir renk alır: yatay uzaklık, dikey uzaklık, bulanıklık yarıçapı ve yayılma. Bulanıklık gölgenin kenarını yumuşatır; yayılma ise gölgeyi büyütür veya küçültür. Yayılmaya negatif bir değer vermek, geniş bulanıklıkla birlikte gölgeyi öğenin altına toplamanın en pratik yoludur. inset anahtar sözcüğü gölgeyi dışarı değil içeri düşürür; girintili alanlar, basılı düğmeler ve iç kenar çizgileri böyle yapılır. Gölge her zaman öğenin border-radius değerini izler, ayrıca hiçbir zaman yer kaplamaz — bu yüzden düzeni kaydırmaz.
Neden tek katman yetmez?
Gerçek dünyada bir nesnenin gölgesi tek parça değildir: temas noktasında koyu ve keskin, uzaklaştıkça açık ve dağınıktır. Tek bir 0 10px 20px gölgesi bu yüzden yapay durur. İnandırıcı bir derinlik için iki ya da üç katman kullanın: küçük uzaklıklı ve az bulanık bir katman nesneyi zemine bağlar, geniş ve soluk bir katman yüksekliği anlatır. Katmanlar virgülle ayrılır ve listedeki ilk katman en üstte boyanır. Aynı yöntem odak halkası için de işe yarar: 0 0 0 2px ile zemin rengi, ardından 0 0 0 5px ile vurgu rengi yazıldığında iki renkli, kenarlığı bozmayan bir halka çıkar.
Başarım ve sık hatalar
Çok büyük bulanıklık yarıçapları tarayıcının her karede geniş bir alanı yeniden boyamasına yol açar; hover durumunda box-shadow değerini doğrudan canlandırmak bu yüzden takılmaya neden olur. Daha iyisi, gölgeyi bir ::after katmanına koyup yalnızca opacity değerini değiştirmektir. Şeffaf PNG veya SVG'lerde gölgenin şekli takip etmesi gerekiyorsa box-shadow yerine filter: drop-shadow() kullanın; ilki her zaman dikdörtgen kutuyu, ikincisi görüntünün gerçek silüetini izler. Gölgeyi saf siyah yerine, zemin renginin koyu ve hafif doygun bir tonuyla yazmak da sonucun daha temiz görünmesini sağlar. Kenar yumuşatmasını köşe yuvarlatma aracıyla birlikte denemek işi kolaylaştırır.