Sombras múltiples (box-shadow)

Se utiliza para proyectar sombras (a menudo llamadas "Sombras paralelas", como en Photoshop) de elementos. A continuación, se muestra un ejemplo con la mayor compatibilidad posible con el navegador:

Todo lo que sabemos acerca de text-shadowstar puede ser aplicado a box-shadow. Es como si fuera la misma propiedad con otro nombre. Sin embargo hay algunos toques especiales. Empecemos con la sintaxis.


box-shadow: desplazamiento horizontal  desplazamiento vertical  desenfoque  extension  color inset;

La extensión acepta valores negativas como en el siguiente ejemplo donde la #caja3 tiene el mismo estilo que la #caja2 pero con una extensión negativa (-6px) de la sombra.

#caja1{box-shadow: 0px 0px 5px 1px black;}

Caja 1


La extensión acepta valores negativas como en el siguiente ejemplo donde la #caja3 tiene el mismo estilo que la #caja2 pero con una extensión negativa (-6px) de la sombra.


#caja2{box-shadow: 0px 10px 10px black;}
#caja3{box-shadow: 0px 10px 10px -6px black;}

Caja 2


Caja 3



Con la propiedad box-shadow podemos aplicar múltiples sombras a un objeto. Para esto debemos aplicar la siguiente sintaxis:

box-shadow: [desplazamiento en x] [desplazamiento en y] [desenfoque] [color] ,
[desplazamiento en x] [desplazamiento en y] [desenfoque] [color] etc.

Por ejemplo si queremos que aparezca una sombra de color rojo en la parte superior izquierda y una sombra verde en la parte inferior derecha podemos aplicar lo siguiente:

#recuadro1{
box-shadow: -30px -30px 20px #f00,
30px 30px 20px #0f0;
border-radius: 20px;
background-color:#ddd;
width:200px;
padding:10px;
}
Recuadro 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,