[解決済み】要素の片側だけにドロップシャドウを作成する方法は？

質問

シャドウを下だけに落とす方法はありますか？2つの画像が隣り合っているメニューがあります。右の画像と重なってしまうので、右の影はつけたくありません。このために画像を使うのは嫌なので、下の方だけに落とすような方法はないでしょうか。

box-shadow-bottom: 10px #FFF; のようなものでしょうか？

-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');

解決方法は？

アップデイト4

update 3と同じですが、最新のCSS（＝ルールが少ない）を使っているので、擬似要素に特別な配置は必要ありません。

#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>

アップデイト3

これまでの私の回答はすべて、この効果を得るために、必ずしも必要ではない余分なマークアップを使っていました。私は、これは 大いに 唯一のコツは、シャドウの正しい位置と、シャドウの正しい強さ/不透明度を得るために、値を調整することです。以下は 擬似要素 :

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

アップデイト2

どうやら、今皆さんが指摘されたように、box-shadow CSSにパラメータを追加するだけでできるようです。以下はそのデモです。

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;

この方が良い解決策になると思います。追加されるパラメータは、次のように記述されています。

4つ目の長さは、スプレッド の距離です。正の値では シャドウシェイプは全方向に拡大します。 の方向へ指定された半径だけ移動します。 負の値では、影絵は は収縮する。

アップデイト

jsFiddleでデモを確認する。 http://jsfiddle.net/K88H9/4/

私が行ったのは、影を付けたい実際の要素の後ろに隠れるように、"shadow要素"を作成することです。shadow要素の幅は、実際の要素の幅より指定した影の2倍だけ小さくし、きちんと整列させました。

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

オリジナル回答

はい、あなたが提供したのと同じ構文で行うことができます。1つ目の値は水平方向の位置を制御し、2つ目の値は垂直方向の位置を制御します。ですから、最初の値を 0px を、2つ目のオフセットには、以下のように好きなものを指定してください。

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

ボックスシャドウの詳細については、こちらをご覧ください。

• 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

お役に立てれば幸いです。