Sombra a las Imagenes y Texto solo con CSS

<div id="contenido">
   <div id="sombra">
      <div id="text">Aquí colocas tu texto.</div>
   </div>
</div>

<style type="text/css">
body{
   margin:0;
   padding:0;
   text-align:center;
   font-family:"Trebuchet MS", Arial, Verdana;
   font-size:12px;
}
#contenido{
   text-align:center;
   padding: 5px;
   margin: 0 auto;
   width:500px; 
}
 
#sombra{
   margin:10px;
   background:#CCCCCC; /* Color de la sombra */
   border: solid 1px #CCCCCC; /* Color del borde */
   width: 500px;
}
 
#text{
   border:solid 1px #CCCCCC;
   margin:-10px 2px 2px -10px; /* Aqui están los famosos márgenes negativos*/
   padding:2px;
   background:#FFFFFF; /* Le damos un color de fondo */
}
</style>

#contenedor{
   text-align:center;
   padding: 5px;
   margin: 0 auto;
   /* width:500px; */ float: left; 
}