1

CSSに苦労しているのは、すでに数時間です。

box-shadow3 つの div で構成される Web サイトの要素にを追加しようとしています:#top #contentと#bot.

これは、私が扱っているものを視覚化するのに役立つ図です。 ここに画像の説明を入力

divbox-shadowの左右に配置する#contentのは簡単な部分でしたが、上下の部分は本当に苦労しています。まともにきれいに見えるものを作ることはできません。

これが私のコードです:

body {
  margin-top: 30px;
}
div#content {
  padding: 20px 30px 20px 30px;
  color: #515348;
  font-size: 76%;
  line-height: 1.6em;
  height: 100px;
  background: #FFF;
  width: 240px;
  margin-right: auto;
  margin-left: auto;
  border-left: 1px solid grey;
  border-right: 1px solid grey;
  box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 8px 0 14px -4px rgba(33, 33, 33, 0.6), -8px 0 14px -4px rgba(33, 33, 33, 0.5);
}
#top {
  background: #FFF;
  height: 10px;
  width: 300px;
  margin: 0 auto;
  position: relative;
  -webkit-border-radius: 8px 8px 0px 0px;
  -moz-border-radius: 8px 8px 0px 0px;
  border-radius: 8px 8px 0px 0px;
  behavior: url(/PIE.htc);
  border-top: 1px solid grey;
  border-left: 1px solid grey;
  border-right: 1px solid grey;
  box-shadow: 0 9px 0px 0px white, -8px 0 14px -4px rgba(33, 33, 33, 0.5), 8px 0 14px -4px rgba(33, 33, 33, 0.6), -8px 0 14px -4px rgba(33, 33, 33, 0.5);
}
#bot {
  background: #FFF;
  height: 10px;
  width: 300px;
  margin: 0 auto;
  position: relative;
  -webkit-border-radius: 0px 0px 8px 8px;
  -moz-border-radius: 0px 0px 8px 8px;
  border-radius: 0px 0px 8px 8px;
  behavior: url(/PIE.htc);
  border-bottom: 1px solid grey;
  border-left: 1px solid grey;
  border-right: 1px solid grey;
  box-shadow: 8px 4px 14px 4px rgba(33, 33, 33, 0.5), 0 9px 0px 0px white, 8px 0 14px -4px rgba(33, 33, 33, 0.6), -8px 0 14px -4px rgba(33, 33, 33, 0.5);
}
<div id="top"></div>
<div id="content"></div>
<div id="bot"></div>

これを少し「よりクリーン」にするアイデアはありますか？

クイック編集:box-shadowボットの部分は、実際には私の画面ではそれほど悪くはありませんでした。別の構成を試すことで失ったいくつかのより良い設定を見つけました。

4

2 に答える 2

0

1 つではなく 3 つの div を持つことのポイントは何ですか?

box {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 300px;
height: 120px;
background: #FFF;
border: 1px solid grey:
}

そして、必要に応じてセレクターにボックスシャドウを適用します

于 2015-10-18T17:19:39.543 に答える