如何在 div 下使阴影宽度为 100%

Question

我对我的网站进行了修复 header 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>

这是屏幕截图：

Answer 1

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

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

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

添加了一个fiddle：https://jsfiddle.net/hpdymvqg/

Answer 2

您的传播半径为负；要使其全宽，您需要这样：

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>

Answer 3

最防水的解决方案：使您的元素 比视口更长 （使用 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.

Answer 4

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

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

已测试here

如何在 div 下使阴影宽度为 100%

How to make shadow 100% width under div

html

css

shadow