Sombra de caja CSS3: exterior e interior

Question

Sombra de caja CSS3: exterior e interior

¿Es posible crear tanto una sombra externa para un efecto 3D como un brillo interno? Tengo un div con un fondo verde lima que está encima de un div azul. Hasta ahora, tengo lo siguiente:

.greendiv{
   background:darkgreen;
   box-shadow: box-shadow: 10px -7px 15px darkgray;
   box-shadow: lightgreen 0px 0px 3px inset;
}

Los colores reales están en formato #ffffff. Parece que la segunda declaración anula la primera. ¿Hay alguna manera de evitar esto?

37

css css3

Author: frenchie, 2011-05-18

Source

1 answers

score 64 · Accepted Answer

Simplemente declaras box-shadow una vez, y usas ambas versiones dentro, separadas por una coma:

Http://www.w3.org/TR/css3-background/#the-box-shadow

La propiedad 'box-shadow' asocia una o más sombras a la caja. La propiedad es una lista de sombras separadas por comas, cada una especificada por 2-4 valores de longitud, un color opcional y una palabra clave 'inset' opcional.

Así que, para ti:

.greendiv {
    background: darkgreen;
    box-shadow: 10px -7px 15px darkgray, lightgreen 0px 0px 3px inset;
}

Véase: http://jsfiddle.net/JzsAh /