Gibt es eine Möglichkeit, zwei CSS3-Box-Schatten für ein Element zu verwenden?

156

Ich versuche, einen Schaltflächenstil in einem Photoshop-Modell mit zwei Schatten zu replizieren. Der erste Schatten ist ein innerer hellerer Kastenschatten (2 Pixel) und der zweite ist ein Schlagschatten außerhalb der Schaltfläche (5 Pixel).

Geben Sie hier die Bildbeschreibung ein

In Photoshop ist dies einfach - Inner Shadow und Drop Shadow. In CSS kann ich anscheinend das eine oder andere haben, aber nicht beide gleichzeitig.

Wenn Sie den folgenden Code in einem Browser ausprobieren, werden Sie feststellen, dass der Box-Schatten den eingefügten Box-Schatten überschreibt.

Hier ist der Schatten der eingefügten Box:

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

Und das möchte ich für den Schlagschatten auf dem Button:

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

Für den Kontext ist hier mein vollständiger Schaltflächencode (mit Verläufen und allen):

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;
}
css Benjamin Humphrey
quelle

Antworten:

405

Sie können Schatten durch Kommas trennen:

box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000;
David sagt, Monica wieder einsetzen
quelle
6
Erwähnen Sie auch, dass der erste deklarierte Schatten einer der folgenden ist: jsfiddle.net/webtiki/s9pkj
web-tiki
Sie vermissen übrigens den Spead-Radius; das kann einen großen Unterschied machen. Auch die Deckkraft des Schattens kann wirklich einen Unterschied machen. Sie können mit Box Shadows spielen, wenn Sie hier in meinem Blogeintrag Entwickler-Tools öffnen. fullstack.life/css3-multiple-box-shadows.html
fullstacklife
16

Box-Schatten können Kommas verwenden , um mehrere Effekte zu erzielen, genau wie bei Hintergrundbildern (in CSS3).

JayC
quelle
Während Sie mehrere Schatten anwenden können, ist das Anwenden von eingefügten Schatten, wie ich festgestellt habe, ein Sonderfall. (Aber dann galt dieser Fall wohl nur für Bilder).
JayC
"Ja wirklich?" Ich bin gerade auf dem Handy und kann daher nicht nachsehen. aber ich hatte das noch nie gehört ... Ich werde mich morgen nach der Arbeit darum kümmern. = /
David sagt, Monica
Wenn Sie einen eingefügten Schatten auf einem Bild wünschen, müssen Sie ein Element oder Pseudoelement darüber setzen. Es kann schwierig sein.
JayC