Solo parte inferior de la sombra del cuadro CSS [duplicado]

¿Cómo puedo hacer esto? Quiero que mi elemento parezca tener una sombra subrayada. No quiero la sombra para los otros 3 lados.

Dec 30 '10 15:12 WillingLearner

Hacer esto:

box-shadow: 0 4px 2px -2px gray;

En realidad, es mucho más simple: independientemente de lo que establezca el desenfoque (tercer valor), establezca la extensión (cuarto valor) en su negativo.

Jun 05 '2011 21:06 Steve B

Puedes usar dos elementos, uno dentro del otro, y darle al exterior overflow: hiddenun ancho igual al elemento interior junto con un acolchado inferior para que la sombra de todos los demás lados quede "cortada".

#outer {
    width: 100px;
    overflow: hidden;
    padding-bottom: 10px;
}

#outer > div {
    width: 100px;
    height: 100px;
    background: orange;

    -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}

Alternativamente, haga flotar el elemento exterior para que se reduzca al tamaño del elemento interior. Ver: http://jsfiddle.net/QJPd5/1/

Dec 30 '2010 08:12 Yi Jiang

Prueba esto

-moz-box-shadow:0 5px 5px rgba(182, 182, 182, 0.75);
-webkit-box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);

Puedes verlo en http://jsfiddle.net/wJ7qp/

Aug 14 '2011 23:08 Neri Barakat