Bir şekilde sadece alt gölge var mı?. 2 resim birbirinden yanında bir Menü VAR. Doğru görüntü örtüşür çünkü doğru bir gölge istemiyorum. Bu resimleri kullanmayı sevmiyorum o yüzden orada alt yalnızca gibi bırakmak için bir yol şudur:

7* *veya benzeri?

-moz-box-shadow: 0px 3px 3px #000;
-webkit-box-shadow: 0px 3px 3px #000;
box-shadow-bottom: 5px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');

GÜNCELLEME 3

Önceki cevaplarım ekstra biçimlendirme mutlaka gerekli olan bu etki oluşturmak için kullanmışlardır. Bu bir benceçoktemiz çözüm... tek numara değerleri ile gölge doğru konumlandırma yanı sıra, gölge donukluk/sağ güç almak için uğraşırken. İşte yeni bir keman, pseudo-elements kullanarak:

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

GÜNCELLEME 2

Görünüşe göre, herkes belirttiği gibi box-shadow CSS için sadece fazladan bir parametre ile bunu yapabilirsiniz. İşte 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;

Bu daha iyi bir çözüm olurdu. Eklenen ek parametre olarak tanımlanır:

Dördüncü bir uzunluk yayılır mesafe. Pozitif değerler neden gölge tüm genişletmek için Şekil belirtilen yarıçap yön. Negatif değerler gölge şeklini neden sözleşme için.

GÜNCELLEME

Dışarı at jsFiddle demo kontrol edin: http://jsfiddle.net/K88H9/4/

Ben oluşturmak ne yaptı bir "eleman" bir gölgeye sahip olmak isteyeceği gerçek bir elemanın arkasına saklanmak. gölge Genişliği "eleman" 2 kere gölge belirttiğiniz gerçek unsur daha tam olarak daha geniş olmak, sonra düzgün hizalanmış. gölge yaptım

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

Orijinal Cevap

Evet, verdiğiniz aynı sözdizimi ile bunu yapabilirsiniz. İlk değer yatay konumlandırma kontrolleri ve ikinci değer dikey konumunu kontrol eder. Aşağıdaki gibi yani sadece 0px ilk değerini ayarlayın ve ikinci istediğiniz gibi ofset

-webkit-box-shadow: 0px 5px #000000;
   -moz-box-shadow: 0px 5px #000000;
        box-shadow: 0px 5px #000000;

Kutu gölgeler hakkında daha fazla bilgi için, bu check out:

• http://www.css3.info/preview/box-shadow/
• https://developer.mozilla.org/en/css/-moz-box-shadow#Browser_compatibility
• http://www.w3.org/TR/css3-background/#the-box-shadow

Bu yardımcı olur umarım.