0

3列のコンテンツを持つWebサイトを作成しています.....

  1. ナビゲーションフロート：左;
  2. メインコンテンツ中心
  3. 右列フロート：右;

これらの3つの領域すべてに影を落とすことは可能ですか。

私は試しましたが、divが最終結果を禁止しているかどうか疑問に思って動作しませんでしたか？

4

2 に答える 2

0

背景の影にはさまざまな方法があります

1) 背景 URL を div のドロップ シャドウ イメージとして指定し、いくつかの margin-left:5px を指定して、ドロップ シャドウのように表示します。

2) topright 、 right 、bottomright、bottom 画像のような 4 つの画像を取得し、div の後に 1 つずつ配置します。

あなたにとって簡単なものを選んでください。それは完璧に機能するはずです。いくつかの例については、以下のリンクを参照して ください http://www.alistapart.com/articles/cssdropshadows/

画像の次の場所にドロップ シャドウを実装しました

http://www.art.com/gallery/id--b1823/animals-posters.htm?ui=E1E1ADDF1A034D5D9A89DB0A8E318263

firebug を使用すると、2 番目のアプローチである をどのように実装したかがわかります。

さらに質問がある場合はお知らせください。

于 2010-11-14T17:32:20.250 に答える
0

もちろん、これらすべてに同時にドロップ シャドウを適用することもできます。ここにリストされているブラウザ サポートhttp://caniuse.com/css-boxshadowに問題がない場合の 1 つの解決策は、CSS3 ボックス シャドウを使用するだけです。

このように、コンテナの 3 つのセレクターすべてを単純にターゲットにするだけです。

.container-left, .container-middle, .container-right { }

次に、ボックス シャドウをそのように適用し (ブラウザのプレフィックスを忘れないでください)、RGBA を使用しているので、アルファ透明度も設定できますが、HSLA も使用できます。 

.container-left, .container-middle, .container-right {
    -webkit-box-shadow: 0 0 9px rgba(20, 0, 0, 0.53);
    -moz-box-shadow:    0 0 9px rgba(20, 0, 0, 0.53);
    box-shadow:         0 0 9px rgba(20, 0, 0, 0.53);
}

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

于 2013-06-07T08:56:47.907 に答える