web-dev-qa-db-ja.com

一方向のみのCSS3ボックスの影？

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

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

css3
48
Mark

これは技術的には@ChrisJと同じ答えですが、box-shadow入札を行う：

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

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

<spread-radius>は負でなければなりません<blur-radius>（他のぼやけた側面が表示されないようにするため）、<offset-y>同じ量だけ減少します。

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

要素の上部に単一のグラデーションバンドが表示されます。

121
zzzzBov

box-shadowは、各方向に指定された量だけ影をオフセットします。したがって、xオフセットを0に、yオフセットを負の値にする必要があります。

さらに、左右に影が見えないように、ぼかし半径とスプレッド半径で遊ぶ必要があります。

例：

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

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

9
ChrisJ

より良い方法は、背景のグラデーションを使用することです。ここでは、左右に並べます。

http://jsfiddle.net/wh3L8/

2
methodofaction

例：

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

最初のパラメーターと2番目のパラメーターは、それぞれx方向とy方向への影のオフセットを指定します。 3番目のパラメーターは、ぼかし距離を指定します。最後に、4番目のパラメーターは散布距離を指定します。

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

デモはここにあります： http://jsfiddle.net/rEdBy/

CSS3 Boxシャドウに関する非常に素晴らしいチュートリアル- http://www.css3.info/preview/box-shadow/

2
Shabnam K

これが私の例です

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

これが私がやった小さなハックです。

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

  1. <div class="one_side_shadow"></div>片側のボックスシャドウを作成する要素のすぐ下（この場合、id="element"下から来る）

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

    box-shadow：0 -8px 20px 2px＃DEDEE3;

0
user1187135

たぶん、box-shadowを使用してみてください：

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

オーバーフローxの場合：

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

つかいます overflow-x: hidden;およびbox-shadow: 0px 10px 16px -10px #000;

0
Marcos Eusebi