如何在div下創建陰影100％寬度

我爲我的網站製作了一個固定的標題div，並在其下添加了陰影，但它不適合我的瀏覽器（100％寬度）??如何在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> 
 
\t <div id="head"> 
 
\t </div> 
 
\t 
 
\t <div id="content"> 
 
\t </div> 
 
</body> 
 
</html>

這裏是一個屏幕捕捉：

來源

2015-11-04 fendert12

最防水的解決方案：讓你的元素不再（或者與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; 
}

至於其他的答案也提到：建議到邊界半徑傳播屬性設置爲一個非負值。或者你可以使用separate box-shadows for each side。

來源

2015-11-04 22:03:59 Tyblitz

感謝Tyblitz，這是一個非常有趣的解決方案。伯恩哈德的解決方案也不錯;-) – fendert12

給固定元件使用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/

來源

2015-11-04 22:00:20 Bernhard

你有負面傳播半徑;它是全寬度你想這樣的：

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> 
 
\t <div id="head"> 
 
\t </div> 
 
\t 
 
\t <div id="content"> 
 
\t </div> 
 
</body> 
 
</html>

來源

2015-11-04 22:01:15

問題在於您的box-shadow的負值。它更改爲下列修復該問題：

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

測試here

來源

2015-11-04 22:04:28 Shadow

如何在div下創建陰影100％寬度

回答

相關問題