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


157

2つの影があるPhotoshopのモックアップでボタンスタイルを複製しようとしています。最初の影は内側の明るいボックスの影(2px)であり、2番目はボタンの外側のドロップシャドウ(5px)自体です。

ここに画像の説明を入力してください

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

回答:


407

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

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

6
また、最初に宣言影が、次の1(S)の上にあることを言及jsfiddle.net/webtiki/s9pkj
ウェブ・ティキ

速度半径が不足しています。それはかなりの違いを生むことができます。また、影の不透明度は実際に違いを生む可能性があります。私のブログエントリで開発ツールを開くと、ボックスシャドウを試すことができます。fullstack.life/css3-multiple-box-shadows.html
fullstacklife

17

ボックスの影は、CSS3の背景画像と同じように、カンマを使用して複数の効果を持つことができます


複数のシャドウを適用できますが、インセットシャドウの適用は特殊なケースです。(しかし、そのケースは画像にのみ適用されると思います)。
JayC、2011

本当に?現時点ではモバイルなので、確認できません。でも、それが以前に報告されたことは聞いていません...明日、仕事の後で調べます。= /
デビッドはモニカを

画像にインセットシャドウが必要な場合は、要素または疑似要素を上に設定する必要があります。トリッキーになる可能性があります。
JayC、2011
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.