come fare un box con ombra?

[chiarapr]

vorrei realizzare un box centrato con ombra che dia l'effetto di una immagine sollevata rispetto allo sfondo. vorrei provare a realizzarla in due modi:
1) sfondo bianco, box centrato con una sottile cornice nera, ombra in basso e a destra sfumata;
2) sfondo grigio, box centrato bianco con una sottile cornice nera, ombra netta (dovrebbe, nelle mie intenzioni, dare l'effetto di un foglio di carta bianco poggiato su un tavolo grigio...).
Vorrei realizzare, se possibile, il tutto con i CSS, ma non sono molto pratica. Per il momento leggendo un pò sono riuscita a realizzare solo il box centrale...

body,html { height:100%;
margin:0 }
#box {width:400px;
height:500px;
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -175px;
background-color: #f3df9d;
}

mi date una mano?
grazie

[fcaldera]

i css supportati dai vari browser non consentono ancora di creare box con un'ombra:

sei costretta ad utilizzare uno o più sfondi trasparenti in formato png (il formato gif non ti consente di creare un ombra sfumata ma ti darebbe un ombra netta) che simulino l'ombra

puoi pensare di usare un unico sfondo se il box ha dimensioni prefissate, oppure due (parte centrale più terminale) se il box deve espandersi in base al contenuto.

sul formato png ci sono molte discussioni in questo forum su come poterlo usare anche su IE.

[chiarapr]

pensavo fosse più semplice...
il box con la cornice nera è facile da realizzare, e per l'ombra pensavo a qualcosa come nel "layout a due colonne con float e background" nella guida ai CSS. per intenderci, quella specie di ombra grigia che separa la zona bianca da quella celeste, e che incorniciava solo due lati del box.
credevo in passato di aver visto qualcosa del genere realizzato con i CSS, ma forse mi sono sbagliata.
grazie cmq