Existe uma maneira de usar duas sombras de caixa CSS3 em um elemento?

157

Estou tentando replicar um estilo de botão em uma maquete do Photoshop que possui duas sombras. A primeira sombra é uma sombra interna da caixa mais clara (2px) e a segunda é uma sombra projetada fora do próprio botão (5px).

insira a descrição da imagem aqui

No Photoshop, isso é fácil - Inner Shadow e Drop Shadow. Aparentemente, no CSS, posso ter um ou outro, mas não os dois ao mesmo tempo.

Se você tentar o código abaixo em um navegador, verá que a sombra da caixa substitui a sombra da caixa inserida.

Aqui está a sombra da caixa de inserção:

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

E é isso que eu gostaria para a sombra no botão:

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

Para o contexto, aqui está o meu código de botão completo (com gradientes e tudo):

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

Respostas:

407

Você pode separar sombras por vírgula:

box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000;
David diz para restabelecer Monica
fonte
6
Também menciona que a sombra primeiro declarada é para da uma (s) seguinte jsfiddle.net/webtiki/s9pkj
web-tiki
Você está perdendo o raio da lança; isso pode fazer muita diferença. Também a opacidade na sombra realmente pode fazer a diferença. Você pode brincar com sombras de caixa se abrir as ferramentas de desenvolvimento aqui na entrada do meu blog. fullstack.life/css3-multiple-box-shadows.html
fullstacklife
17

As sombras da caixa podem usar vírgulas para ter vários efeitos, assim como nas imagens de plano de fundo (em CSS3).

JayC
fonte
Embora você possa aplicar várias sombras, a aplicação de sombras embutidas , eu descobri, é um caso especial. (Mas esse caso só se aplica a imagens, eu acho).
JayC
Realmente? Estou no celular no momento, então não posso verificar; mas eu não tinha ouvido isso antes ... vou investigar isso amanhã, depois do trabalho. = /
David diz que restabelece Monica
Se você deseja uma sombra inserida em uma imagem, defina um elemento ou pseudoelemento por cima. Pode ser complicado.
JayC