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

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

enter image description here

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

2 答え

シャドウをカンマ区切りで区切ることができます。

box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000;
323
追加された
どういたしまして;喜んで助けてくれた! =)
追加された 著者 David Thomas,
また、最初に宣言された影が次の影の先頭にあることにも言及してください。 jsfiddle.net/webtiki/s9pkj
追加された 著者 web-tiki,
それは私がそれがそうであると思ったよりずっと容易だった:)
追加された 著者 entiendoNull,
spead radius btwが足りなくなっています。それはかなりの違いを生むことができます。また、影の不透明度も実際に差をつけることができます。私のブログエントリにdevツールを開いている場合は、ボックスシャドウで再生できます。 fullstack.life/css3-multiple-box-shadows.html
追加された 著者 fullstacklife,
伝説、よろしく!それは素敵で簡単でした。
追加された 著者 Benjamin Humphrey,

ボックスシャドウでは、背景画像と同様に、コンマを使用して複数のエフェクトを使用することができます(CSS3 )。

12
追加された
本当に?私は現時点では携帯になっているので、私は確認できません。しかし、私は以前に報告されたことを聞いていないだろう...明日、仕事の後でそれを調べるだろう。 = /
追加された 著者 David Thomas,
複数のシャドウを適用することはできますが、私が見つけた影の影を適用することは特殊なケースです。 (しかし、その場合は画像にのみ適用されます。)
追加された 著者 JayC,
画像に影を入れたい場合は、上に要素または擬似要素を設定する必要があります。それは難しいことがあります。
追加された 著者 JayC,
@JemarJonesええ、私の答えがカルマポイントを得た後、私は自分の答えを認識し、それの下のコメントはまだ公共にいくつかの固有の価値を持っていましたが、私は自分の答えで私は何か他のことをする。最終的に私は自分が言ったことを無視することにしましたが、私はそれらのコメントを私の "おっとり"の瞬間の記録として残しました。しかし、答えの中のコメントは実際の答えとは無関係なので、私は少なくとも、無関係のビットを削除しなければなりません。ありがとう。
追加された 著者 JayC,
あなたは二度と答えを出したり、これを削除したことはありません。
追加された 著者 Jemar Jones,
ありがとうございました - これは私自身のことです。
追加された 著者 Sidhartha,