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

影を下だけに落とす方法はありますか？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

更新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

どうやら、他の誰もがちょうど指摘したように、ボックスシャドウ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/

私がしたことは、あなたが影を付けたいと思うであろう実際の要素の後ろに隠れる「影要素」を作成することでした。「影要素」の幅を、実際の要素よりも指定した影の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;
}

元の回答

はい、あなたが提供したのと同じ構文でこれを行うことができます。最初の値は水平位置を制御し、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

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

シャドウを小さくするには、spreadパラメータを使用します。

.shadow {
  -webkit-box-shadow: 0 6px 4px -4px black;
  -moz-box-shadow: 0 6px 4px -4px black;
  box-shadow: 0 6px 4px -4px black;
}

<div class="shadow">Some content</div>

ライブデモ：http : //dabblet.com/gist/a8f8ba527f5cff607327

側面に影が表示されないようにするには、（の絶対値）拡散半径（4番目のパラメーター）をぼかし半径（3番目のパラメーター）と同じにする必要があります。

背景の色が固定されている場合は、背景の色が同じでぼかしが0の2つのマスキングシャドウを使用して、サイドシャドウ効果を非表示にできます。次に例を示します。

box-shadow: 
    -6px 0 white,         /*Left masking shadow*/
    6px 0 white,          /*Right masking shadow*/
    0 7px 4px -3px black; /*The real (slim) shadow*/

黒い影は最後でなければならず、角を超えて広がるのを防ぐために負の広がり（-3px）があることに注意してください。

ここではフィドル（マスキングシャドウの色を変更して、実際の動作を確認します）。

div{
    width: 100px;
    height: 100px;
    border: 1px solid pink;
    box-shadow: -6px 0 white, 6px 0 white, 0 7px 5px -2px black;
}

<div></div>

これはあなたが求めているものだと思いますか？

.shadow {
  -webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  -moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  box-shadow: 0 0 0 4px white, 0 6px 4px black;
}

<div class="shadow">wefwefwef</div>

常に仕様を読むことをお勧めします。box-shadow-bottomプロパティはありません。Leaが指摘するように、接頭辞のないプロパティは常に接頭辞の後ろに配置する必要があります。

っていうことは：

.shadow {
  -webkit-box-shadow: 0px 2px 4px #000000;
  -moz-box-shadow: 0px 2px 4px #000000;
  box-shadow: 0px 2px 4px #000000;
}

<div class="shadow">Some content</div>

オーバーフローが非表示に設定されており、下部にいくつかのパディングがあるコンテナdivを使用するのはどうですか？これは最も簡単な解決策のようです。

自分では考えていませんでしたが、どこかで見ました。

要素を使用して要素をラップし、ボックスシャドウとオーバーフローを取得します。ラッパーで非表示にすると、余分なボックスシャドウを非表示にして、使用可能な境界線を残すことができます。これにより、広がりのために要素が見た目よりも小さくなる問題も修正されます。

このような：

#wrapper { padding-bottom: 10px; overflow: hidden; }
#elem { box-shadow: 0 0 10px black; }

ここにコンテンツが入ります

純粋なCSSで実行する必要がある場合でも、賢い解決策です！

ヨルゲン・イブンズが言ったように。

またclip-path、表示したいエッジ以外のオーバーフローしているエッジをすべてクリップ（非表示）することもできます。

.shadow {
  box-shadow: 0 4px 4px black;
  clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
}

クリップパス（MDN）を参照してください。への引数polygonは、左上ポイント、右上ポイント、右下ポイント、および左下ポイントです。下端を200%（またはより大きい任意の数100%）に設定すると、オーバーフローを下端のみに制限できます。

影も必要でしたが、画像の下だけで、少し左右に設定しました。これは私のために働きました：

.box-shadow {
   -webkit-box-shadow: 5px 35px 30px -25px #888888;
      -moz-box-shadow: 5px 35px 30px -25px #888888;
           box-shadow: 5px 35px 30px -25px #888888;
}

これが適用される要素は、ページ全体の画像（980px x 300px）です。

設定をいじるときに役立つ場合は、次のように実行されます。

水平方向の影、垂直方向の影、ぼかしの距離、広がり（つまり、影のサイズ）、および色。

影を調べることをお勧めします。

.header{
    -webkit-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
}

このコードは現在、stackoverflow Webで使用されています。

このコードペン（私ではありません）は、これを実行する非常に単純な方法と、反対側を単独で非常にうまく示しています。

box-shadow: 0 5px 5px -5px #333;

https://codepen.io/zeckdude/pen/oxywmm

背景が無地の場合（またはCSSを使用してそれを再現できる場合）、そのように線形グラデーションを使用できます。

div {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5px, #fff 5px, #fff 100%)
}

<div>
<p>Foobar</p>
<p>test</p>
</div>

これにより、要素の下部に不透明度30％の黒から完全に透明な5pxのグラデーションが生成されます。要素の残りの部分の背景は白です。もちろん、線形グラデーションの最後の2色のストップを変更すると、背景を完全に透明にすることができます。

また、下部でグラデーションを設定することもできます。これは、必要な影が既に半透明の要素上にあったため、クリッピングを心配する必要がなかったため、これは私にとって役に立ちました。

&:after {
      content:"";
      width:100%;
      height: 8px;
      position: absolute;
      bottom: -8px;
      left: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    }

"bottom"プロパティと "height"プロパティを一致させ、rgba値をシャドウの上部/下部に配置したい任意の値に設定するだけです

あなたはこのようにそれを行うことができます：

一般的な構文：

selector {
   box-shadow: topBoxShadow, bottomBoxShadow, rightBoxShadow, leftBoxShadow
}

例：一番下のボックスの影だけを赤にしたい、

これを行うには、下のボックスのシャドウオプションを設定する必要があるすべての側面オプションを設定し、次のように他のすべてのオプションを空に設定する必要があります。

.box {
     -moz-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -o-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -webkit-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
}

他の誰かに彼の答えを白ではなく透明な面で更新して、他の色の背景でも機能するようにします。

body {
  background: url(http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-backgrounds_042320876_304.jpg)
}

div {
  background: url(https://www.w3schools.com/w3css/img_avatar3.png) center center;
  background-size: contain;
  width: 100px;
  height: 100px;
  margin: 50px;
  border: 5px solid white;
  box-shadow: 0px 0 rgba(0, 0, 0, 0), 0px 0 rgba(0, 0, 0, 0), 0 7px 7px -5px black;
}

<div>
</div>

内側の影

 .shadow {
   -webkit-box-shadow: inset 0 0 9px #000;
   -moz-box-shadow: inset 0 0 9px #000;
   box-shadow: inset 0 0 9px #000;
 }

<div class="shadow">wefwefwef</div>