¿Cómo elimino solo la parte superior de una caja sombreada?

Question

Estoy usando border-radius y box-shadow para hacer brillar alrededor de un elemento.

¿Puedo eliminar solo la parte superior de box-shadow?

Live example

div { 
    margin-top: 25px; 
    color: #fff; 
    height: 45px; 
    margin-top: -5px; 
    z-index: -10; 
    padding: 26px 24px 46px; 
    font-weight: normal; 
    background: #000; /*#fff;*/ 
    border-top: 0px solid #e5e5e5; 
    border-left: 1px solid #e5e5e5; 
    border-right: 1px solid #e5e5e5; 
    border-bottom: 1px solid #e5e5e5; 
    -webkit-border-radius: 3px; 
    -khtml-border-radius: 3px; 
     -moz-border-radius: 3px; 
      border-radius: 3px; 
    -webkit-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px; 
    -khtml-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px; 
     -moz-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px; 
      box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px; 
} 

Editar: esta pequeña cosita es el problema!

Answer 1

Esto funciona, pero debo admitir que no sé si hay una mejor manera (o si es posible sin agregar un elemento de envoltura). Usar múltiples box-shadow s sería una buena idea, pero parece que no puedo hacer que se vea igual.

Ver:http://jsfiddle.net/thirtydot/8qEUc/3/

HTML:

<div id="bla"> 
    <div> something </div> 
</div> 

CSS:

#bla { 
    overflow-y: hidden; 
    padding: 0 10px 10px 10px; 
    margin: 0 -10px 
} 
#bla > div { 
    /* the CSS from your question here */ 
} 

Answer 2

Puede intentar lo siguiente. Mi método solo usa CSS.

Ejemplo Enlace:http://jsfiddle.net/kL8tR/56/

div{ 
    margin-top: 25px; 
    color: #fff; 
    height: 45px; 

    padding: 26px 24px 46px; 

    border-left: 1px solid #e5e5e5; 
    border-right: 1px solid #e5e5e5; 
    border-bottom: 1px solid #e5e5e5; 
    border-top: none; 

    -moz-box-shadow: 0 0 10px 1px black, 0px -20px black, 0px 1px 10px rgba(255,255,255,0.7); 
    -webkit-box-shadow: 0 0 10px 1px black, 0px -20px black, 0px 1px 10px rgba(255,255,255,0.7); 
    box-shadow: 0 0 10px 1px black, 0px -20px black, 0px 1px 10px rgba(255,255,255,0.7); 

} 

Básicamente lo que estoy haciendo, estoy creando sombras de múltiples capas, por lo que la primera sombra se superpone a la segunda capa, enmascarando la sección superior.

he utilizado esto antes, aquí es mi referencia:

mirar debajo de la sección - Capas múltiples sombras [http://www.css3.info/preview/box-shadow/]

Answer 3

@milo; no es su borde superior es shadow que usted proporciona en su código

para eliminar el resplandor superior debe definir el espaciado vertical de su sombra.

escribir esto en el CSS sombra:

box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ; 
-moz-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ; 
-webkit-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ; 
-khtml-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ; 

& su puede generar a partir de aquí http://css3generator.com/

NOTA: hay cuatro propiedades de sombra se horizontal, vertical, blur & spread de sombra interior se puede definir inset para ello

Answer 4

Dado que usa la sombra de cuadro, puede usar pseudo-elemento para crearlo y colocarlo debajo de su div, colocándolo de manera que solo las partes necesarias sería visible: http://jsfiddle.net/kL8tR/60/

Hay algunas notas importantes:

• El pseudo-elemento debe tener z-index: -1
• El div sí debe tener position: relative y no hay z-index

pseudo-elementos + CSS3 = maravilla :)

Answer 5

puedes cambiar la sombra más abajo (vert ical desplazamiento) y reducir el radio de la sombra, algo en la línea de (sustituir el asterisco con la cantidad de píxeles necesarios para simplemente cubrir la sombra superior con la propia caja):

box-shadow: 0 *px 10px 0 rgba(200,200,200,0.7);