Cieniowanie pojemników w CSS

Od wersji 3.0 pojawiła się możliwość cieniowania pojemników (nareszcie!). No i co? No i nie działa! Mówi się, że na razie. Pożyjemy, zobaczymy. Na razie stosujemy więc durne sztuczki (jak zwykle!).

Zakładam, że mamy pojemnik:

<div class="shadow">Tra ta ta!</div>

Powinien dać się podcieniować przy pomocy:

.shadow {
  box-shadow: 2px 3px 5px gray;
}

Oczywiście nigdzie to nie działa, mimo, że specyfikacja określa to w sposób jasny. Trzeba stosować sztuczki:

.shadow {
   -moz-box-shadow: 2px 3px 5px gray;
  -webkit-box-shadow: 2px 3px 5px gray;
  box-shadow: 2px 3px 5px gray;
}

Bóg mi światkiem, że nie rozumiem dlaczego w Firefxie działa

   -moz-box-shadow: 2px 3px 5px gray;

a nie działa

  box-shadow: 2px 3px 5px gray;

Co za różnica we wpisywanych literkach? W każdym razie to zadziała.

Jeszcze znaczenie poszczególnych pozycji:
2px - przesunięcie w poziomie
3px - przesunięcie w pionie
5px - rozmycie
gray - kolor cienia

No i jeszcze uwaga. Głupi Internet Explorer nie obsługuje niczego! Należy zapomnieć o naturalnym cieniowaniu. Nadal trzeba rysować szczątki cieni w Photoshopie, czy czymś takim...