resplandor - sombra a elemento css

¿Hay alguna manera de usar dos sombras de caja CSS3 en un elemento?

Question

Intento replicar un estilo de botón en una maqueta de Photoshop que tiene dos sombras. La primera sombra es una sombra de caja interior más clara (2px), y la segunda es una sombra paralela fuera del botón (5px).

En Photoshop esto es fácil: Inner Shadow y Drop Shadow. En CSS, aparentemente puedo tener uno u otro, pero no ambos al mismo tiempo.

Si prueba el siguiente código en un navegador, verá que la sombra de cuadro anula la sombra de cuadro insertada.

Aquí está la sombra de la caja insertada:

box-shadow: inset 0 2px 0px #dcffa6;

Y esto es lo que me gustaría para la sombra paralela en el botón:

box-shadow: 0 2px 5px #000;

Para el contexto, aquí está mi código de botón completo (con degradados y todo):

button {
outline: none;
position: relative;
width: 160px;
height: 40px;
font-family: ''Open Sans'', sans-serif;
color: #fff;
font-weight: 800;
font-size: 12px;
text-shadow: 0px 1px 3px black;
border-radius: 3px;
background-color: #669900;
background: -webkit-gradient(linear, left top, left bottom, from(#97cb52), to(#669900));
background: -moz-linear-gradient(top, #97cb52, #669900);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=''#97cb52'', endColorstr=''#669900'');
box-shadow: inset 0 2px 0px #dcffa6;
box-shadow: 0 2px 5px #000;
border: 1px solid #222;
cursor: pointer;
}

Answer 1

Las sombras de caja pueden usar commas para tener múltiples efectos, al igual que con las imágenes de fondo (en CSS3).

Answer 2

Puedes separar las sombras por comas:

box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000;