Sombra de caja para el lado inferior solamente

Tengo una caja de contenido y necesito dar sombra para eso. Pero quiero dar sombra solo para el fondo de la caja. Utilicé esto css box-shadow: 0 3px 5px #000000;Sombra de caja para el lado inferior solamente

Si doy este código, se muestra a la izquierda, derecha e inferior. Necesito fondo solo

¿Puede alguien sugerir resolver este. Muchas gracias

Fuente

2012-10-09 Shivaji

esto será útil http://css3gen.com/box-shadow/ crear su propio :) –

http://silviarebelo.com/demos/boxgenerator/ Este sitio le dará una idea de cómo funciona box-shadow –

Puede hacer lo siguiente después de agregar la clase one-edge-shadow o usarla como desee.

.one-edge-shadow { 
    -webkit-box-shadow: 0 8px 6px -6px black; 
     -moz-box-shadow: 0 8px 6px -6px black; 
      box-shadow: 0 8px 6px -6px black; 
}

Source

Fuente

2012-10-09 11:21:12 Dev

Gran explicación de los 5 valores en este artículo. De manera similar, puede crear fácilmente una sombra horizontal unilateral. – lyubeto

Esto resultó útil, y me ganó un voto favorable. ¡Gracias! –

Intenta usar el generador en línea css3.me Cambia el valor y obtén el código, bastante simple.

Fuente

2012-10-09 11:21:02

-webkit-box-shadow: 0 3px 5px -3px #000; 
-moz-box-shadow: 0 3px 5px -3px #000; 
box-shadow: 0 3px 5px -3px #000;

Fuente

2012-10-09 11:23:32

Si bien es probable que esto responda a la pregunta, a menudo es mejor explicar * por qué * o proporcionar enlaces informativos. –

tiene que especificar negative spread a la sombra casilla para eliminar la sombra lado

-webkit-box-shadow: 0 10px 10px -10px #000000; 
    -moz-box-shadow: 0 10px 10px -10px #000000; 
     box-shadow: 0 10px 10px -10px #000000;

Salida http://dabblet.com/gist/9532817 e intentar cambiar las propiedades y saber cómo se comporta

Fuente

2014-03-13 17:25:04

Se puede utilizar como sea necesario:

 .top { 
      box-shadow: 0 -5px 5px -5px #333; 
     } 

     .right { 
      box-shadow: 5px 0 5px -5px #333; 
     } 

     .bottom { 
      box-shadow: 0 5px 5px -5px #333; 
     } 

     .left { 
      box-shadow: -5px 0 5px -5px #333; 
     } 

     .all { 
      box-shadow: 0 0 5px #333; 
     }

Fuente

2016-10-12 13:01:05 GeekOnJava

Sombra de caja para el lado inferior solamente

Respuesta

Cuestiones relacionadas