如何在div下使阴影100％宽度答案

【问题标题】：How to make shadow 100% width under div如何在div下使阴影100％宽度
【发布时间】：2015-11-04 21:51:49
【问题描述】：

我为我的网站制作了一个固定的标题 div，并在其下添加了一个阴影，但它不适合我的浏览器（100% 宽度）??

这是我的 CSS：

body{
margin: 0;
padding: 0;
background-color: #F7F7F7;
}

#head{
   width: 100%;
   height: 60px;
   background-color: #5B86E1;
  
   box-shadow: 0 10px 17px -5px #000000;
   position: fixed;
}

#content{
   width: 900px;
   padding-top: 60px;
   min-height: 100px;
   background-color: #FFFFFF;
   margin-right: auto;
   margin-left: auto;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<div id="head">
	</div>
	
	<div id="content">
	</div>
</body>
</html>

这是一个屏幕截图：

【问题讨论】：

标签： html css shadow

【解决方案1】：

您的传播半径为负；让它全宽你想要这个：

box-shadow: 0 10px 17px 0px #000000;

演示：

body{
margin: 0;
padding: 0;
background-color: #F7F7F7;
}

#head{
   width: 100%;
   height: 60px;
   background-color: #5B86E1;
  
   box-shadow: 0 10px 17px 0px #000000;
   position: fixed;
   
   margin-right: auto;
   margin-left: auto;
}

#content{
   width: 900px;
   padding-top: 60px;
   min-height: 100px;
   background-color: #FFFFFF;
   margin-right: auto;
   margin-left: auto;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<div id="head">
	</div>
	
	<div id="content">
	</div>
</body>
</html>

【讨论】：

【解决方案2】：

最防水的解决方案：使您的元素更长（使用width 或padding 属性）比视口，并设置负边距（注意：只有真正需要边距使这项工作与非固定元素一起工作）。你的新#head css：

#head {
   width: 110%;
   margin: 0px -5%;
   height: 60px;
   top: 0;
   background-color: #5B86E1;
   box-shadow: 0 10px 17px 0px #000000;
   position: fixed;
}

正如其他答案所提到的：建议将border-radius spread 属性设置为非负值。或者你可以使用separate box-shadows for each side。

【讨论】：

感谢 Tyblitz，这是一个非常有趣的解决方案。 Bernhard 的解决方案也很好 ;-)

【解决方案3】：

使用lefttop``right```给固定元素一个位置

header{
    position:absolute;
    left:0px;
    top:0px;
    right:0px;
    height:60px;

    background-color:#00f;
    box-shadow:0px 0px 17px #000;
}

添加了一个小提琴：https://jsfiddle.net/hpdymvqg/

【讨论】：

【解决方案4】：

问题是因为您的 box-shadow 为负值。将其更改为以下内容可解决此问题：

box-shadow: 0 10px 17px 0px #000000;

测试here

【讨论】：

不。你意识到你的测试没有解决任何问题，对吧？ ;)