18

#container div私の目標は、幅 960pxの の左右にドロップ シャドウを追加することです。

#container自体には、ヘッダー、ナビゲーション メニュー、メイン コンテンツ、サイドバー、およびフットが含まれます。#containerただし、ヘッダー自体は、グラフィックのためにカスタム幅でからはみ出しています。

そのため、左右にドロップ シャドウが追加されません。ドロップが必要なのはナビゲーション メニューの下だけです。これは、ヘッダーがカスタム幅に設定されており、それ自体を超えて突き出ているため#containerです。すでにはみ出しているものの左右にドロップ シャドウを付けると、美観が損なわれます。

見やすくするために、私のサイトはhttp://www.doubleyourdating.com/に似ていますが、ヘッダー要素が両側に突き出ています。

#container次の解決策を使用して、ナビゲーション メニューからの左側と右側にドロップ シャドウを追加しようとしました。

  1. 両端に 25 ピクセルの「フェード」を含む、高さ 1 ピクセル、幅 1010 ピクセルの画像を Photoshop で作成しました。としてCSSしたの#container div background-imageですが、おそらく#containerそれ自体が幅960pxに設定されているためか、幅1010pxの背景が表示されません。960px の幅を変更すると、この単純な 2 列のレイアウトで死のカスケードが作成されることに注意してください。

  2. コンテナー div の「周り」にその場しのぎのシャドー ボックス div を CSS で作成しようとしましたが、ヘッダーのカスタム幅がコンテナーよりも広くなっているため、うまくいきません。

どうすればこれを機能させることができますか?

4

2 に答える 2

41

次のようなことを試すことができます：

box-shadow: 6px 0px 5px -5px #999, -6px 0px 5px -5px #999;

もちろん、自分に合うまで値をいじってください。

于 2011-04-03T19:54:28.240 に答える
-2

単一行のコード:

box-shadow: 4px 0 2px #222,  -4px 0 2px #222;

対応する CSS スタイル要素に挿入するだけで完了です。

于 2013-06-28T10:59:49.720 に答える