Come rimuovo solo la parte superiore di un box-shadow?

Question

Sto utilizzando border-radius e box-shadow per creare un bagliore attorno a un elemento.

Posso rimuovere solo la parte superiore di 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; 
} 

Edit: questo piccolo thingy è il problema!

Answer 1

Questo funziona, ma ammetto di non sapere se c'è un modo migliore (o se è possibile senza aggiungere un elemento wrapper). L'utilizzo di più box-shadow s sarebbe una buona idea, ma non riesco a farlo sembrare lo stesso.

See: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

È possibile provare quanto segue. Il mio metodo utilizza solo i CSS.

Esempio Link: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); 

} 

Fondamentalmente quello che sto facendo, sto creando ombre multistrato, così la prima ombra sovrappone al secondo strato, mascherando la sezione superiore.

ho usato prima, qui è il mio riferimento:

sguardo ai sensi della sezione - sovrapposizione di più ombre [http://www.css3.info/preview/box-shadow/]

Answer 3

@milo; non è il tuo bordo superiore è un shadow che inserisci nel tuo codice

per rimuovere il bagliore superiore devi definire la spaziatura verticale della tua ombra.

Scrivi questo nel vostro css ombra:

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) ; 

& vostro grado di generare da qui http://css3generator.com/

NOTA: ci sono quattro proprietà d'ombra sono horizontal, vertical, blur & spread per ombra al suo interno si può definire inset per esso

Answer 4

Poiché si utilizza box-shadow, è possibile utilizzare lo pseudo-elemento per crearlo e posizionarlo sotto il div, posizionandolo in modo che solo le parti necessarie sarebbe visibile: http://jsfiddle.net/kL8tR/60/

Ci sono alcune note importanti:

• Lo pseudo-elemento deve avere z-index: -1
• Il div si deve avere position: relative e non z-index

pseudo-elementi + CSS3 = awesomeness :)

Answer 5

potresti semplicemente spostare l'ombra in basso (vert ical spostamento) e ridurre il raggio ombra, qualcosa sulla falsariga di (sostituire l'asterisco con la quantità di pixel necessari per solo coprire l'ombra superiore con la scatola stessa):

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