0

次のマークアップがあります。

<!DOCTYPE html>
<html lang="en">
<body>
<div id="wrapper">
<div id="container">
<div id="navigation">
</div>
</div>
</div>
</body>
</html>

次のCSSを使用

body
{
width: 100%;
background-color: #E4E4E4;
font-size: 16px;
line-height: 19px;
font-family: Cambria, Georgia, serif;
}

div#wrapper
{
width: 960px;
margin: 0 auto;
background-image: url("nav_bg.png");
background-repeat: no-repeat;
background-position: center 219px;
}

div#container
{
width: 920px;
background-color: #F9EADE;
box-shadow: 0 0 15px 5px rgb(31, 73, 125);
margin: 0 auto;
}

div#navigation
{
height: 50px;
margin-bottom: 200px;
background-color: rgb(31, 73, 125);
box-shadow: 0px 10px 4px -4px rgba(0, 0, 0, 0.8);
}

nav_bg.pngはこれです

ここに画像の説明を入力してください

そして、私は左下と右下に白い影のないスペースを取得します

ここに画像の説明を入力してください

コードをこれに変更すると

div#navigation
{
height: 50px;
margin-bottom: 200px;
background-color: rgb(31, 73, 125);
box-shadow: 0px 10px 4px 0px rgba(0, 0, 0, 0.8);
}

このように左右に影が追加されます。

ここに画像の説明を入力してください

そして、次のようにdiv＃navigationからbackground-colorとborder-shadowを削除するとします。

div#navigation
{
height: 50px;
margin-bottom: 200px;
}

私はこれを手に入れます

ここに画像の説明を入力してください

申し訳ありませんが、私は前に本当に悪い質問を台無しにしました。

4

2 に答える 2

2

divを少し広くして、側面に届くようにすることもできます。コードを見せていただければ、その方法をお見せできます。

編集：ナビゲーションの左右にマイナスマージンを追加し、幅を追加して、必要な側面に到達するようにします

margin: 0 -20px 200px;
width: 947px;

EDIT2：これが機能しない場合は、表示されていないか、間違っていることがあります。

body
{
width: 100%;
background-color: #E4E4E4;
font-size: 16px;
line-height: 19px;
font-family: Cambria, Georgia, serif;
}

div#wrapper
{
width: 960px;
margin: 0 auto;
background-image: url("oBecq.png");
background-repeat: no-repeat;
background-position: center 219px;
}

div#container
{
width: 920px;
background-color: #F9EADE;
box-shadow: 0 0 15px 5px rgb(31, 73, 125);
margin: 0 auto;
height: 500px;
}

div#navigation
{
height: 50px;
margin: 0 -10px 200px;
background-color: rgb(31, 73, 125);
box-shadow: 0px 10px 4px -4px rgba(0, 0, 0, 0.8);
top: 219px;
position: relative;
width: 950px;
}
于 2012-08-17T07:26:47.033 に答える
1

これは、シャドウスプレッドプロパティが-4px（4番目の数値）に設定されているためです。

0に設定すると、希望どおりに表示されます。

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

http://jsfiddle.net/Kyle_Sevenoaks/evd4K/

于 2012-08-17T07:22:19.627 に答える