應用底部框陰影在左側和右側底部留下一些陰影空間

我有以下標記。應用底部框陰影在左側和右側底部留下一些陰影空間

<!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是這個

enter image description here

而且我得到的底部白色無陰影的空間左右

enter image description here

如果我更改代碼以這種

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); 
}

我得到的左，右兩側，因爲這額外的陰影。

enter image description here

，如果我從股利＃導航去除背景顏色和邊框陰影如下。

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

我得到這個

enter image description here

對不起，我之前messesd了問題，真正的壞。

來源

2012-08-17 Jawad

請分享一些代碼... – Usman 2012-08-17 07:22:53

@Usman：編輯和包含的代碼。 – Jawad 2012-08-17 07:54:20

你已經對PNG有影子了，爲什麼要用CSS添加更多內容？使用一個或另一個，否則你一定會遇到問題。 – Kyle 2012-08-17 07:54:24

你也可以只讓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-17 07:26:47 rain01

這不起作用。導航只是向右推。 – Jawad 2012-08-17 08:25:17

這是因爲你有陰影蔓延屬性設置爲-4px（第四號）

將其設置爲0，當你希望它會出現。

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

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

來源

2012-08-17 07:22:19 Kyle

對不起，我不得不提出一個新問題。可能由於我的html，你的靈魂不適用。我將包括HTML或只編輯baove問題。 – Jawad 2012-08-17 07:29:00

它應該工作，你正在改變正確的價值？ – Kyle 2012-08-17 07:29:54

我真的搞砸了這個問題。試圖刪除它，使新的但不能。我會編輯它。 – Jawad 2012-08-17 07:35:14

應用底部框陰影在左側和右側底部留下一些陰影空間

回答

相關問題