我有以下标记。
<!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;
}
我明白了
抱歉,我之前把这个问题搞得很糟糕。
答案 0 :(得分: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;
}
答案 1 :(得分:1)
这是因为您将阴影扩展属性设置为-4px(第四个数字)
将其设置为0,它将按您的意愿显示。
box-shadow: 0 10px 2px 0px rgba(0, 0, 0, 0.8);