right - CSS Box Shadow Bottom Only
box-shadow left and right (4)
Esta pregunta ya tiene una respuesta aquí:
- solo sombra inferior css3 11 respuestas
¿Cómo hago esto? Quiero que mi elemento se vea como si tuviera un subrayado de sombra. No quiero la sombra por los otros 3 lados.
Hacer esto:
box-shadow: 0 4px 2px -2px gray;
en realidad es mucho más simple, lo que sea que establezca el desenfoque en (3er valor), establezca la propagación (4º valor) en el negativo.
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/
Puede usar dos elementos, uno dentro del otro, y dar un overflow: hidden al exterior overflow: hidden y un ancho igual al elemento interior junto con un relleno inferior para que la sombra en todos los otros lados se "corte"
#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 contraiga al tamaño del elemento interno. Ver: http://jsfiddle.net/QJPd5/1/
prueba esto para obtener el cuadro de sombra bajo tu control total.
<html>
<head>
<style>
div {
width:300px;
height:100px;
background-color:yellow;
box-shadow: 0 10px black inset,0 -10px red inset, -10px 0 blue inset, 10px 0 green inset;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
esto se aplicaría también a la sombra de la caja exterior.