CSS box-shadow su tre lati di un div?

Question

Voglio avere un'ombra di casella su tre lati di un div (eccetto il lato superiore). Come potrei farlo?

Answer 1

Ecco un JS Fiddle per te, utilizza solo un singolo div per funzionare.

#shadowBox { 
    background-color: #ddd; 
    margin: 0px auto; 
    padding: 10px; 
    width: 220px; 
    box-shadow: 0px 8px 10px gray, 
     -10px 8px 15px gray, 10px 8px 15px gray; 
} 

Si imposta un'ombra in basso, in basso a sinistra e in basso a destra. Con le ombre morbide diventa un po 'complicato ma è fattibile. Ha solo bisogno di un po 'di congetture per ridurre il raggio di sfocatura dell'ombra centrale, in modo che appaia senza cuciture e non troppo scuro quando si sovrappone alle ombre laterali.

Answer 2

Ecco un esempio del valore negativo Y suggerito da @Vigrond

box-shadow: 0px -8px 10px 0px rgba(0,0,0,0.15); 

Answer 3

Se si dispone di un colore di sfondo solido, allora si può ottenere questo risultato utilizzando una combinazione di background-color e z-index. Il trucco è dare l'elemento con box-shadow e il suo precedente posizionamento fratello, quindi dare al fratello precedente un colore di sfondo e impostarlo per avere un valore più alto z-index in modo che sia impilato sopra l'elemento con box-shadow, in effetti coprendo la sua ombra superiore.

Potete vedere una demo qui: http://codepen.io/thdoan/pen/vNvpKv

Se non c'è immediato fratello precedente con cui lavorare, allora si può anche usare uno pseudo-elemento come :before o :after: http://codepen.io/thdoan/pen/ojJEMj

Answer 4

Se siete alla ricerca per qualcosa come Google ombre materiale di design:

.shadow1 { 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
} 
.shadow2 { 
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
} 
.shadow3 { 
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 
} 
.shadow4 { 
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 
} 
.shadow5 { 
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); 
} 

Fonte: https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d#.wyvbmcq10

Answer 5

Per ombre traslucide con angoli difficili (ad es. nessun raggio di sfocatura) Ho usato questo:

.shadow-no-top { 
    position: relative; 
    box-shadow: -5px 0 0 0 rgba(0,0,0,.2), 5px 0 0 0 rgba(0,0,0,.2); 
} 
.shadow-no-top:before { 
    content: ""; 
    position: absolute; 
    top: 100%; 
    left: -5px; 
    right: -5px; 
    bottom: -5px; 
    background-color: rgba(0,0,0,.2); 
} 

Questo utilizza un'ombra per le parti sinistra e destra e aggiunge: dopo il contenuto pseudo come l'ombra inferiore. Ciò evita sovrapposizioni che rendono l'ombra più scura o angoli mancanti.

Tuttavia, ciò richiede che lo sfondo dell'elemento sia solido.