Question

我为我的网站制作了一个固定的标题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

你有一个负的传播半径;因为它是全宽你想要这个：

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 2

使用left top``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/

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％宽度

4 个答案: