15

したがって、私の Web サイトにはヘッダーと、その直後に Revolution Slider を含む div があります。ヘッダーの下とスライダーの上にボックスシャドウを追加しようとしています。しかし、ヘッダーにも追加しない限り、機能しませんが、それではmargin-bottom演習全体が意味をなさないものになります。

これはコードです：

#header {
  display:block;
  min-height: 99px;
  background: #FFFFFF;
  border-top: 3px solid #8dddcd;
  border-bottom: 1px solid #ecf0f1;
  line-height: 99px;
  box-shadow: 0 10px 10px 10px rgba(0,0,0,0.3);
}
#rev {
  position: relative;
}
<div id="header"></div>
<div id="rev">the slider</div>

誰かがこれを引き起こしている原因を突き止めるのを手伝ってもらえますか?

4

4 に答える 4

9

次の質問を参照してください。

box-shadow 仕様によると:

外側の box-shadow は、要素のボーダー ボックスが不透明であるかのように影を落とします。影は境界線の外側にのみ描画されます

したがって、オーバーラップしたくない場合は、自分でマージンを追加する必要があります

#header {
  box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.3);
  margin-bottom: 10px;
}
#slider {
  position: relative;
}
<div id="header">Header</div>
<div id="slider">Slider</div>

于 2015-03-26T15:48:17.600 に答える
2

ヘッダーの下のみ、スライダーの上にボックス シャドウが必要な場合は、次のようにボックス シャドウの最後の数字にマイナスを使用できます。

box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);

これにより、ボックスの影が下部にのみ表示されます。

作業例:

#header {
  display:block;
  min-height: 99px;
  background: #FFFFFF;
  border-top: 3px solid #8dddcd;
  border-bottom: 1px solid #ecf0f1;
  line-height: 99px;
  box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);
}
#rev {
  position: relative;
}
<div id="header"></div>
<div id="rev">the slider</div>

于 2015-03-26T16:20:46.943 に答える
1

box-shadow(外側の影) のデフォルトのレンダリング モードを使用する場合、オーバーフローしたボックスのコンテンツが表示されるように、その方向 (例では y 軸に 10px) にマージンを追加する必要があります。ボックスの影をヘッダー内に表示したい場合はinset、宣言にキーワードを追加するだけです。

于 2015-03-26T15:47:19.433 に答える