¿Cómo hacer sombra en el borde inferior?

Question

Necesito aplicar la sombra del borde en el borde inferior por CSS3. Solo quiero aplicar CSS3 sombra en la parte inferior. es posible?

Answer 1

Probar:

div{ 
 
-webkit-box-shadow:0px 1px 1px #de1dde; 
 
-moz-box-shadow:0px 1px 1px #de1dde; 
 
box-shadow:0px 1px 1px #de1dde; 
 
    }

<div>wefwefwef</div>

Por lo general, se suma una sombra borrosa 1px 1px desde el fondo de la caja

box-shadow: [horizontal offset] [vertical offset] [blur radius] [color]; 

Answer 2

use box-shadow sin desplazamiento horizontal.

http://www.css3.info/preview/box-shadow/

por ejemplo.

div { 
 
    -webkit-box-shadow: 0 10px 5px #888888; 
 
    -moz-box-shadow: 0 10px 5px #888888; 
 
    box-shadow: 0 10px 5px #888888; 
 
}

<div>wefwefwef</div>

Habrá una ligera sombra en los lados con un gran radio de desenfoque (5px en el ejemplo anterior)

Answer 3

La cuestión es la sombra que sale del lado de la div que contiene. Para evitar esto, el valor de desenfoque debe ser igual al valor absoluto del valor de dispersión.

div { 
 
    -webkit-box-shadow: 0 4px 6px -6px #222; 
 
    -moz-box-shadow: 0 4px 6px -6px #222; 
 
    box-shadow: 0 4px 6px -6px #222; 
 
}

<div>wefwefwef</div>

explica detalladamente here

Answer 4

Nuevo método para una vieja pregunta

Parece que en las respuestas siempre que la emisión fue siempre cómo el el borde de la caja sería visible a la izquierda y a la derecha del objeto o tendrías que insertarlo hasta el punto de no ensombrecer la longitud completa del contenedor.

Este ejemplo utiliza el pseudo elemento :after junto con un degradado lineal con transparencia para poner una sombra paralela en un contenedor que se extiende exactamente a los lados del elemento que desea sombrear.

Vale la pena señalar con esta solución es que si utiliza relleno en el elemento que desea colocar sombra, no se mostrará correctamente. Esto se debe a que el pseudo elemento after agrega su contenido directamente después del contenido interno de los elementos. Entonces, si tiene relleno, la sombra aparecerá dentro del cuadro. Esto se puede superar eliminando el relleno en el contenedor externo (donde se aplica la sombra) y utilizando un contenedor interno donde se aplica el relleno necesario.

Ejemplo con relleno y color de fondo en el div sombra:

Si desea cambiar la profundidad de la sombra, basta con aumentar el estilo height en el elemento seudo after. También puede oscurecer, aclarar o cambiar los colores en los estilos de degradado lineal.

body { 
 
    background: #eee; 
 
} 
 

 
.bottom-shadow { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 

 
.bottom-shadow:after { 
 
    content: ""; 
 
    display: block; 
 
    height: 8px; 
 
    background: transparent; 
 
    background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0); /* IE6-9 */ 
 
} 
 

 
.bottom-shadow div { 
 
    padding: 18px; 
 
    background: #fff; 
 
}

<div class="bottom-shadow"> 
 
    <div> 
 
    Shadows, FTW! 
 
    </div> 
 
</div>