Est-il possible d’utiliser deux ombres de zone CSS3 sur un élément?

Question

Je suis en train de reproduire un style de bouton dans un Photoshop de la maquette qui a deux ombres sur elle. La première ombre est un intérieur plus légers zone d'ombre (2px), et la seconde est une ombre à l'extérieur le bouton (5px) lui-même.

http://i.stack.imgur.com/1i0Fe.png

Dans Photoshop, c'est facile Intérieure de l'Ombre et de l'Ombre portée. Dans le CSS je peux apparemment l'un ou l'autre, mais pas les deux en même temps.

Si vous essayez le code ci-dessous dans un navigateur, vous verrez que le box-shadow remplace l'encart box-shadow.

Voici l'encart zone d'ombre:

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

Et c'est ce que j'aimerais pour l'ombre portée sur le bouton:

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

Pour le contexte, voici mon code du bouton (avec des dégradés et tout et tout):

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

Vous pouvez séparer les ombres par des virgules:

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

Answer 2

Les ombres de boîte peuvent utiliser des virgules pour avoir plusieurs effets, comme avec les images d’arrière-plan (en CSS3).

EDIT: doh, écrémé que pour rapide. Donner une seconde réponse bientôt (ou supprimer celle-ci).