AGGIORNAMENTO 4
Come l'aggiornamento 3 ma con i moderni CSS (= meno regole) in modo che non sia richiesto alcun posizionamento speciale sullo pseudo elemento.
#box {
background-color: #3D6AA2;
width: 160px;
height: 90px;
position: absolute;
top: calc(10% - 10px);
left: calc(50% - 80px);
}
.box-shadow:after {
content:"";
position:absolute;
width:100%;
bottom:1px;
z-index:-1;
transform:scale(.9);
box-shadow: 0px 0px 8px 2px #000000;
}
<div id="box" class="box-shadow"></div>
AGGIORNAMENTO 3
Tutte le mie precedenti risposte hanno utilizzato un markup aggiuntivo per creare questo effetto, che non è necessariamente necessario. Penso che questo a soluzione molto più pulita ... l'unico trucco è giocare con i valori per ottenere il giusto posizionamento dell'ombra e la giusta forza / opacità dell'ombra. Ecco un nuovo violino, usando pseudo-elementi :
http://jsfiddle.net/UnsungHero97/ARRRZ/2/
HTML
<div id="box" class="box-shadow"></div>
CSS
#box {
background-color: #3D6AA2;
width: 160px;
height: 90px;
margin-top: -45px;
margin-left: -80px;
position: absolute;
top: 50%;
left: 50%;
}
.box-shadow:after {
content: "";
width: 150px;
height: 1px;
margin-top: 88px;
margin-left: -75px;
display: block;
position: absolute;
left: 50%;
z-index: -1;
-webkit-box-shadow: 0px 0px 8px 2px #000000;
-moz-box-shadow: 0px 0px 8px 2px #000000;
box-shadow: 0px 0px 8px 2px #000000;
}
AGGIORNAMENTO 2
Apparentemente, puoi farlo con solo un parametro aggiuntivo al CSS di box-shadow come tutti gli altri hanno appena sottolineato. Ecco la demo:
http://jsfiddle.net/K88H9/821/
CSS
-webkit-box-shadow: 0 4px 4px -2px #000000;
-moz-box-shadow: 0 4px 4px -2px #000000;
box-shadow: 0 4px 4px -2px #000000;
Questa sarebbe una soluzione migliore. Il parametro aggiuntivo che viene aggiunto è descritto come:
La quarta lunghezza è una distanza estesa. I valori positivi fanno sì che la forma dell'ombra si espanda in tutte le direzioni entro il raggio specificato. I valori negativi causano la contrazione della forma dell'ombra.
AGGIORNARE
Guarda la demo su jsFiddle: http://jsfiddle.net/K88H9/4/
Quello che ho fatto è stato creare un "elemento ombra" che si nascondesse dietro l'elemento reale che si vorrebbe avere un'ombra. Ho reso la larghezza dell '"elemento ombra" per essere esattamente meno ampia dell'elemento reale di 2 volte l'ombra specificata; poi l'ho allineato correttamente.
HTML
<div id="wrapper">
<div id="element"></div>
<div id="shadow"></div>
</div>
CSS
#wrapper {
width: 84px;
position: relative;
}
#element {
background-color: #3D668F;
height: 54px;
width: 100%;
position: relative;
z-index: 10;
}
#shadow {
background-color: #3D668F;
height: 8px;
width: 80px;
margin-left: -40px;
position: absolute;
bottom: 0px;
left: 50%;
z-index: 5;
-webkit-box-shadow: 0px 2px 4px #000000;
-moz-box-shadow: 0px 2px 4px #000000;
box-shadow: 0px 2px 4px #000000;
}
Risposta originale
Sì, puoi farlo con la stessa sintassi che hai fornito. Il primo valore controlla il posizionamento orizzontale e il secondo valore controlla il posizionamento verticale. Quindi basta impostare il primo valore su 0pxe il secondo su qualunque offset si desideri come segue:
-webkit-box-shadow: 0px 5px #000000;
-moz-box-shadow: 0px 5px #000000;
box-shadow: 0px 5px #000000;
Per ulteriori informazioni sulle ombre delle scatole, dai un'occhiata a questi:
Spero che aiuti.
box-shadow-bottominesistenti e non supportati da nessuno. Vedi nicolasgallagher.com/css-drop-shadows-without-images/demo per le tecniche di box-shadow legittime.