css3 ombre casella in una sola direzione?

Question

Ho un elemento con ombre di riquadri, ma voglio l'ombra solo sulla parte superiore.

Non c'è modo di impostare solo l'ombra superiore? Devo ricorrere alla creazione di elementi aggiuntivi per sovrapporre le ombre laterali?

Answer 1

Questo è tecnicamente la stessa risposta @ChrisJ, con qualche dettaglio in più su come rendere box-shadow fare la vostra offerta:

per riferimento _{le voci * sono opzionali}:

box-shadow: <inset*> <offset-x> <offset-y> <blur-radius*> <spread-radius*> <color*>; 

Il <spread-radius> deve essere negativo <blur-radius> (in modo che nessuno degli altri lati sfocati si visualizzi) e quindi è necessario eseguire lo <offset-y> giù per lo stesso importo:

box-shadow: inset 0 20px 20px -20px #000000; 

che vi darà una singola banda di pendenza nella parte superiore dell'elemento.

Answer 2

box-shadow compensa l'ombra di una data quantità in ciascuna direzione. Quindi è necessario che l'offset x sia 0 e che l'offset y sia qualcosa di negativo.

Inoltre, è necessario giocare con il raggio di sfocatura e il raggio di diffusione in modo che l'ombra non sia visibile sui lati sinistro e destro.

Esempio:

box-shadow: #777 0px -10px 5px -2px; 

vedere la descrizione sulla Mozilla Developer Network.

Answer 3

Un modo migliore sarebbe utilizzare un gradiente di sfondo, qui sono entrambi i lati.

http://jsfiddle.net/wh3L8/

Answer 4

Ecco un piccolo trucco che ho fatto.

<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div> 
<div class="one_side_shadow"></div> 

1. creare un <div class="one_side_shadow"></div> proprio sotto l'elemento che voglio creare la casella ombra su un solo lato (in questo caso voglio un'ombra inserto unilaterale per id="element" proveniente dal basso)

2. Quindi ho creato un'ombreggiatura regolare utilizzando un offset verticale negativo per spostare l'ombra verso l'alto su un lato.

   box-shadow: 0 -8px 20px 2px # DEDEE3;

Answer 5

Esempio:

box-shadow: 0 2px 0px 0px red inset; 

il primo parametro ed il secondo parametro specifica l'offset ombra direzione x ed y direzione rispettivamente. Terzo parametro specifica la distanza di sfocatura. Infine, il quarto parametro specifica la distanza di diffusione.

Specificando solo il secondo parametro con l'offset si desidera dà l'ombra superiore senza ombre laterali.

demo può essere trovato qui: http://jsfiddle.net/rEdBy/

Un bel tutorial su CSS3 ombre di sicurezza - http://www.css3.info/preview/box-shadow/

Answer 6

Forse provare a utilizzare box-shadow:

box-shadow: h-shadow v-shadow blur spread color inset;

con troppopieno-x:

overflow-x: visible|hidden|scroll|auto|no-display|no-content;

uso overflow-x: hidden; e box-shadow: 0px 10px 16px -10px #000;

Answer 7

Ecco il mio esempio riprova una volta

-webkit-box-shadow: 0 8px 6px -6px black; 
-moz-box-shadow: 0 8px 6px -6px black; 
box-shadow: 0 8px 6px -6px black;