应用底部框阴影在左侧和右侧底部留下一些阴影空间

我有以下标记。应用底部框阴影在左侧和右侧底部留下一些阴影空间

<!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

应用底部框阴影在左侧和右侧底部留下一些阴影空间

回答

相关问题