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