MISE À JOUR 4
Identique à la mise à jour 3 mais avec un css moderne (= moins de règles) de sorte qu'aucun positionnement spécial sur le pseudo-élément n'est requis.
#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>
MISE À JOUR 3
Toutes mes réponses précédentes utilisaient un balisage supplémentaire pour créer cet effet, ce qui n'est pas nécessairement nécessaire. Je pense que c'est une solution beaucoup plus propre ... la seule astuce consiste à jouer avec les valeurs pour obtenir le bon positionnement de l'ombre ainsi que la bonne force / opacité de l'ombre. Voici un nouveau violon, utilisant des pseudo-éléments :
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;
}
MISE À JOUR 2
Apparemment, vous pouvez le faire avec juste un paramètre supplémentaire au CSS box-shadow comme tout le monde vient de le souligner. Voici la démo:
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;
Ce serait une meilleure solution. Le paramètre supplémentaire qui est ajouté est décrit comme suit:
La quatrième longueur est une distance étalée. Les valeurs positives entraînent l'expansion de la forme d'ombre dans toutes les directions selon le rayon spécifié. Les valeurs négatives provoquent la contraction de la forme de l'ombre.
METTRE À JOUR
Découvrez la démo sur jsFiddle: http://jsfiddle.net/K88H9/4/
Ce que j'ai fait, c'est créer un "élément d'ombre" qui se cacherait derrière l'élément réel que vous voudriez avoir une ombre. J'ai fait que la largeur de "l'élément d'ombre" soit exactement moins large que l'élément réel de 2 fois l'ombre que vous spécifiez; puis je l'ai aligné correctement.
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;
}
Réponse originale
Oui, vous pouvez le faire avec la même syntaxe que vous avez fournie. La première valeur contrôle le positionnement horizontal et la seconde valeur contrôle le positionnement vertical. Il suffit donc de définir la première valeur sur 0pxet la seconde sur le décalage que vous souhaitez comme suit:
-webkit-box-shadow: 0px 5px #000000;
-moz-box-shadow: 0px 5px #000000;
box-shadow: 0px 5px #000000;
Pour plus d'informations sur les ombres de boîte, consultez celles-ci:
J'espère que ça aide.
box-shadow-bottomqui n'existent pas et qui ne sont prises en charge par personne. Voir nicolasgallagher.com/css-drop-shadows-without-images/demo pour les techniques légères d'ombre de boîte.