css3ボックスシャドウは一方向にのみ表示されますか？

Question

私はインセットボックスの影を持っている要素を持っていますが、私はその影だけを上にしたいです。

トップシャドウのみを設定する方法はありますか？サイドシャドウをオーバーレイする要素を追加する必要がありますか？

Answer 1

これはbox-shadowはあなたの入札を行うようにする方法についていくつかのより多くの詳細を、技術的に@ChrisJと同じ答えです：

参考のために _*項目オプションです：

box-shadow: <inset*> <offset-x> <offset-y> <blur-radius*> <spread-radius*> <color*>; 

<spread-radius>は、<blur-radius>である必要があります（他のぼやけた辺が現れないようにする必要があります）。その後、0をバンプする必要がありますダウン同じ量だけ：

box-shadow: inset 0 20px 20px -20px #000000; 

それは要素の上部にあなたの単一勾配のバンドが得られます。

Answer 2

ボックスシャドウは、シャドウを各方向に一定量だけオフセットします。したがって、xオフセットは0に、yオフセットは負の値にする必要があります。

さらに、ぼかし半径と広がり半径で再生して、影が左右に見えないようにする必要があります。

例：

box-shadow: #777 0px -10px 5px -2px; 

はMozilla Developer Network上の説明を参照してください。

Answer 3

より良い方法は、バックグラウンドのグラデーションを使用することです。

http://jsfiddle.net/wh3L8/

Answer 4

ここで私がやった少しハックです。

<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div> 
<div class="one_side_shadow"></div> 

（このケースでは、私は下から来 id="element"ため、片側はめ込み影をしたい）右、私は片側ボックスシャドウを作成したい要素の下に <div class="one_side_shadow"></div>を作成します。

2. 次に、負の垂直オフセットを使って通常のボックスシャドウを作成し、シャドウを片側に押し上げました。

   ボックスシャドウ：0 -8px 20px 2px＃DEDEE3;

Answer 5

例：

box-shadow: 0 2px 0px 0px red inset; 

第一パラメータ及び第二パラメータは、それぞれx方向及びy方向に影のオフセットを指定します。 3番目のパラメータは、ぼかし距離を指定します。 最後に、4番目のパラメータは、分散距離を指定します。

オフセットを使用して2番目のパラメータのみを指定すると、サイドシャドウのないトップシャドウが得られます。

デモはここで見つけることができます：CSS3ボックスシャドウのhttp://jsfiddle.net/rEdBy/

非常に素晴らしいチュートリアル - http://www.css3.info/preview/box-shadow/

Answer 6

たぶん、ボックスシャドウ使ってみてください：オーバーフロー-Xと

box-shadow: h-shadow v-shadow blur spread color inset;

を：

overflow-x: visible|hidden|scroll|auto|no-display|no-content;

ここoverflow-x: hidden;とbox-shadow: 0px 10px 16px -10px #000;

Answer 7

を使用して動作しないこと、ありません一度

-webkit-box-shadow: 0 8px 6px -6px black; 
-moz-box-shadow: 0 8px 6px -6px black; 
box-shadow: 0 8px 6px -6px black;