1つの要素に2つのCSS3ボックスシャドウを使用する方法はありますか？

Question

私は、Photoshopモックアップで2つのシャドウがあるボタンスタイルを複製しようとしています。最初のシャドウは内側の明るいボックスシャドウ（2ピクセル）で、2番目のシャドウはボタンの外側のドロップシャドウ（5ピクセル）です。 Photoshopで

これは簡単です - シャドウ（内側）ドロップシャドウ。 CSSでは、私は明らかにどちらか一方を持つことができますが、同時に両方を持つことはできません。

ブラウザで以下のコードを試してみると、ボックスシャドウがインセットボックスシャドウよりも優先されることがわかります。ここで

は、はめ込みボックスシャドウです：

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

そして、これは私がボタンのドロップシャドウのための希望です：グラデーションで（コンテキストについては

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

は、ここに私の完全なボタンのコードですそして全て）：

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

することができますカンマで別々の影：*インセット*影を適用

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

Answer 2

ボックスの影は、マルチを持っているcommasを使用することができます（CSS3の）背景画像と同じような効果があります。