5

こんにちは、上部以外のすべての側面にドロップ シャドウを取得しようとしています。ドロップ ダウン サブ メニューの場合、このサイトでこのコードが見つかりました。すべての側面に影がありますが、下部にはありません。

body {
     width: 300px;
     height: 200px;
     margin: 20px auto;

 -webkit-box-shadow: 0 -3px 3px -3px #999, 3px 0px 3px -3px #999, -3px 0px 3px -3px #999;
 -moz-box-shadow:    0 -3px 3px -3px #999, 3px 0px 3px -3px #999, -3px 0px 3px -3px #999;
 box-shadow:         0 -3px 3px -3px #999, 3px 0px 3px -3px #999, -3px 0px 3px -3px #999
 }

上以外のすべての面が影になるように変更するにはどうすればよいですか?
フィドルを試してみましたが、私の人生では、上記のコードを理解して上から下の影に変更することはできません
http://jsfiddle.net/PuKDb/


このhttp://jsfiddle.net/leaverou/8tgAp/のようにする必要があります
が、赤い線の代わりに上からの影...

私はカットアンドペーストのコーダーなので、どんな助けも感謝します!

4

4 に答える 4

11 
body {
    width: 300px;
    height: 200px;
    margin: 20px auto;

-webkit-box-shadow: 3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;
-moz-box-shadow:    3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;
box-shadow:         3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999
}

明らかにそれが機能する理由に興味がないため、説明はありません;)

于 2012-04-05T15:48:49.123 に答える
2

おそらく著者は二度とこのトピックにアクセスすることはありませんが、正しい定義は 3 つではなく 2 つの宣言によって行われることがわかりました。

box-shadow: 3px 5px 8px -1px rgba( 15, 15, 15, .8 ), -3px 5px 8px -1px rgba( 15, 15, 15, .8 );

説明するのは難しいですが、2 つの原色を定義すると、下の影に理由が表示されます。

box-shadow: 3px 3px 8px -1px red, -3px 3px 8px -1px yellow;

最初の値としてゼロ以外の整数が存在すると、2 つの色が混合され、新しい色が生成されます。

ポイントは、3 つの宣言を定義すると、そのうちの 1 つが (引数に応じて) 他の宣言の 1 つを覆い、より暗い影を生成することです。

同じことが垂直オフセットにも当てはまります。両方が同じ場合 (ここでは 5px で表されます)、別のオーバーレイが、正の場合は下の影で、負の場合は上の影で発生します (これはトピックの場合ではありません)。

それが他の誰かに役立つことを願っています。

于 2012-06-27T01:23:46.473 に答える
0

これはあなたのために働くはずです

body 
{
    width: 300px;
    height: 200px;
    margin: 20px auto;

-webkit-box-shadow: 3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;

-moz-box-shadow:    3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;

box-shadow:         3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999
}
于 2012-04-05T15:50:44.090 に答える
0 
.div {
    -webkit-box-shadow: 0 3px 3px -3px #c00;
    -moz-box-shadow:    0 3px 3px -3px #c00;
    box-shadow:         0 3px 3px -3px #c00;
}

サイズとぼかしに応じて 2 番目の数値セットを変更します。

于 2012-04-05T15:57:28.963 に答える