¿Hay alguna manera de usar dos sombras de caja CSS3 en un elemento?

116

Estoy tratando de replicar un estilo de botón en una maqueta de Photoshop que tiene dos sombras. La primera sombra es una sombra de caja interior más clara (2px), y la segunda es una sombra paralela fuera del botón (5px).¿Hay alguna manera de usar dos sombras de caja CSS3 en un elemento?

En Photoshop esto es fácil - Sombra interior y la sombra. En CSS, aparentemente puedo tener uno u otro, pero no ambos al mismo tiempo.

Si intenta el código de abajo en un navegador, verá que la caja-sombra anula la inserción box-shadow.

Aquí está la sombra cuadro de inserción:

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

Y esto es lo que me gustaría que la sombra paralela en el botón:

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

Para el contexto, aquí es mi código del botón completo (con gradientes y todo):

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

Fuente

2011-12-19 Benjamin Humphrey

289

Puede separados por comas sombras:

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

Fuente

2011-12-19 02:46:26

¡Leyenda, gracias! Eso fue lindo y fácil. –

De nada; ¡Me alegro de haber ayudado! =) –

también mencionan que la primera sombra declarado es el de uno de los siguientes (s) http://jsfiddle.net/webtiki/s9pkj/ –

sombras caja puede utilizar commas tener múltiples efectos, al igual que con las imágenes de fondo (en CSS3).

Fuente

2011-12-19 02:45:00 JayC

Si bien se puede aplicar múltiples sombras, la aplicación de inserción * * sombras, he encontrado, es un caso especial. (Pero entonces ese caso solo se aplica a las imágenes, supongo). – JayC

¿De verdad? Estoy en el móvil por el momento, así que no puedo verificar; pero no había escuchado eso antes ... Lo investigaré, mañana, después del trabajo. =/ –

Si desea una sombra insertada en una imagen, debe establecer un elemento o pseudoelemento en la parte superior. Puede ser complicado – JayC

¿Hay alguna manera de usar dos sombras de caja CSS3 en un elemento?

Respuesta

Cuestiones relacionadas