css - 複数のボックスシャドウがレンダリングされない

Question

CSS3とボックスシャドウを使用して、テキスト入力にドロップシャドウと内部シャドウを与えようとしています。ここに私のコードが表示されます。

.text {
        width:388px;
        line-height:37px; 
        height:37px; 
        box-shadow:inset 0px 4px 4px rgba(193, 209, 230, 0.58), 0px 2px 2px, rgba(255, 255, 255, 0.75);
        border-radius:10px; 
        background:#cdd6e6; 
        border:0 none; 
}

http://jsfiddle.net/3CBrm/

しかし、私のボックスシャドウルールは無視されているだけです。何が間違っているのでしょうか。

Answer 1

あなたは余分なものを持っているようです,：

...rgba(193, 209, 230, 0.58), 0px 2px 2px, rgba(255, 255, 255, 0.75);
                                         ^

この修正後、影がそこにあるように見えますが、背景色に似すぎています。

jsFiddleデモ