C’è un modo per usare due ombre di box CSS3 su un elemento?

Sto provando a replicare uno stile di pulsante in un mock-up di Photoshop con due ombre su di esso. La prima ombra è un’ombra di casella interna più leggera (2px), mentre la seconda è un’ombra esterna al pulsante (5px) stessa.

inserisci la descrizione dell'immagine qui

In Photoshop è facile: Inner Shadow e Drop Shadow. In CSS posso apparentemente avere l’uno o l’altro, ma non entrambi allo stesso tempo.

Se provi il codice riportato di seguito in un browser, vedrai che l’ombra della casella sostituisce l’ombra della casella inserita.

Ecco l’ombra della casella interna:

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

E questo è quello che vorrei per l’ombreggiatura sul pulsante:

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

Per il contesto, ecco il mio codice pulsante completo (con sfumature e tutto):

 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; } 

Puoi separare le ombre da virgole:

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

Le ombre di casella possono utilizzare le virgole per avere più effetti, proprio come con le immagini di sfondo (in CSS3).