Duplicar posible:
drop shadow only bottom css3CSS Shadow Box - Parte superior e inferior Sólo
no puedo encontrar ningún ejemplo de cómo hacer esto, pero ¿cómo puedo añadir una sombra cuadro sólo para la parte superior e inferior de un elemento?
Como ha señalado Kristian, un buen control sobre los valores z a menudo resolverá sus problemas.
Si eso no funciona, puede echarle un vistazo al CSS Box Shadow Bottom Only al usar el desbordamiento oculto para ocultar el exceso de sombra.
Me gustaría también tener en cuenta que la propiedad box-shadow puede aceptar una lista separada por comas de sombras de esta manera:
box-shadow: 0px 10px 5px #888, 0px -10px 5px #888;
esto le dará un cierto control sobre la "cantidad" de la sombra en cada dirección.
Echa un vistazo a http://www.css3.info/preview/box-shadow/ para obtener más información sobre box-shadow.
Espero que esto fuera lo que estabas buscando!
esencialmente la sombra es la forma de la caja apenas compensada detrás de la caja real. para ocultar partes de la sombra, necesita crear divs adicionales y establecer su índice z encima del recuadro sombreado para que la sombra no sea visible.
Si desea tener un control muy específico sobre sus sombras, construirlos como imágenes y creó DIV contenedor con la cantidad correcta de relleno y los márgenes .. entonces utilizar la corrección png para asegurarse de que las sombras se representan correctamente en todos los navegadores
He jugado con eso y creo que tengo una solución. El siguiente ejemplo muestra cómo configurar Box-Shadow para que solo muestre una sombra para el recuadro superior e inferior de un elemento.
Leyenda:. De color insetOption leftPosition topPosition blurStrength spreadStrength
Descripción
La clave para lograr esto es establecer el valor de desenfoque a < = el negativo del valor diferencial (ex inserción 0px 5px - ? px 5px # 000; el valor de desenfoque debe ser -5 o inferior) y también mantener el valor de desenfoque> 0 cuando se resta del valor de posicionamiento primario (por ejemplo, utilizando el ejemplo de arriba, el valor de desenfoque debe ser -9 o superior , lo que nos da un valor óptimo para que la borrosidad esté entre -5 y -9).
Solución
.styleName {
/* for IE 8 and lower */
background-color:#888; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#FFFFCC, offX=0, offY=0, positive=true);
/* for IE 9 */
box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7);
/* for webkit browsers */
-webkit-box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7);
/* for firefox 3.6+ */
-moz-box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7);
}
Firefox 33.1.1 establece que estos son valores de propiedad incorrectos en las etiquetas. Ya sea que use box-shadow o -moz-box-shadow, no puedo simular el inquilino fundamental de su solución, que es usar valores negativos de desenfoque. – Jon
Después de algunos experimentos he encontrado que un cuarto valor en la línea controla la propagación (al menos en FF 10). Me opuse a las compensaciones verticales y les di una propagación negativa.
Aquí está el trabajo de la pluma: http://codepen.io/gillytech/pen/dlbsx
<html>
<head>
<style type="text/css">
#test {
width: 500px;
border: 1px #CCC solid;
height: 200px;
box-shadow:
inset 0px 11px 8px -10px #CCC,
inset 0px -11px 8px -10px #CCC;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
Esto funciona perfectamente para mí!
Esto solo da como resultado dos sombras de cuadro insertadas. ¿Me estoy perdiendo de algo? –
@Jakobud Esta fue la base de la pregunta original ... Cómo agregar sombras de recuadro en la parte superior e inferior del div. ¿Me estaba perdiendo algo? – gillytech
esta es una solución limpia y sin cortes. debe ser marcado como el correcto en mi humilde opinión. (aunque la respuesta seleccionada actual menciona esto). – yogee
Así que esta es mi primera respuesta aquí, y porque necesitaba algo similar, lo hice con pseudoelementos para 2 sombras internas y una DIV adicional para una sombra externa superior. No sé si esta es la mejor solución, pero tal vez ayudará a alguien.
HTML
<div class="shadow-block">
<div class="shadow"></div>
<div class="overlay">
<div class="overlay-inner">
content here
</div>
</div>
</div>
CSS
.overlay {
background: #f7f7f4;
height: 185px;
overflow: hidden;
position: relative;
width: 100%;
}
.overlay:before {
border-radius: 50% 50% 50% 50%;
box-shadow: 0 0 50px 2px rgba(1, 1, 1, 0.6);
content: " ";
display: block;
margin: 0 auto;
width: 80%;
}
.overlay:after {
border-radius: 50% 50% 50% 50%;
box-shadow: 0 0 70px 5px rgba(1, 1, 1, 0.5);
content: "-";
display: block;
margin: 0 auto;
position: absolute;
bottom: -65px;
left: -50%;
right: -50%;
width: 80%;
}
.shadow {
position: relative;
width:100%;
height:8px;
margin: 0 0 -22px 0;
-webkit-box-shadow: 0px 0px 50px 3px rgba(1, 1, 1, 0.6);
box-shadow: 0px 0px 50px 3px rgba(1, 1, 1, 0.6);
border-radius: 50%;
}
duplicados de otras muchas preguntas acerca de tener sombras de la caja en sólo partes específicas de una caja (ver columna Relacionados ->) – BoltClock
[Este violín ] (http://jsfiddle.net/masondesu/FsnnZ/) puede ser de utilidad para algunos. – L84
Con varias sombras: http://stackoverflow.com/a/20596554/1491212 Es posible que desee adaptarlo para la parte superior/inferior pero obtendrá la esencia –