箱形陰影不適用於部分

Question

我無法在某個部分實現陰影。它應該看起來像這樣。

你看到在底部邊框輕微的陰影。

我的代碼看起來像：

.top-bar { 
    background-color:#e0f2f1; 
    height:50px; 
    box-shadow: 0px 2px 4px rgba(0,0,0,0.2); 
} 

我不知道爲什麼它不能工作了。也許我的語法不正確。如果您需要更多的詳細信息，請參考我的項目Codepen

Answer 1

給position: relative頂端酒吧

box-shadow只能在工作的非遺傳定位section

這裏是Demo

* { 
 
    padding:0; 
 
    margin:0; 
 
} 
 
.top-bar { 
 
    background-color:#e0f2f1; 
 
    height:50px; 
 
    box-shadow: 0px 5px 14px green; 
 
\t position: relative; 
 
} 
 

 
.paragraph-container { 
 
    margin:0 auto; 
 
} 
 

 
#top-bar-paragraph { 
 
    text-align:center; 
 
    margin-top:10px; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight:bold; 
 
    font-size:14px; 
 
    opacity:0.7; 
 
} 
 

 
.project-name-class { 
 
    background-color:white; 
 
    height:200px; 
 
} 
 

 
.col-md-8 img { 
 
    margin-top:30px; 
 
    width:100%; 
 
}

<section class="top-bar"> 
 
    <div class="container"> 
 
     <p id = "top-bar-paragraph">this is not official wikipedia page please refer to <a href="https://www.wikipedia.org/" target="_blank">wikipedia.org</a></p> 
 
    </div> 
 
</section> 
 

 
<section class="project-name-class"> 
 
    
 
    <div class="container"> 
 
    
 
    <div class="row"> 
 
     
 
     <div class="col-md-8 col-md-offset-2"> 
 
      
 
     <img src="http://res.cloudinary.com/nzmai/image/upload/v1471508759/Wikipedia-Search_n8wfpx.png" alt="image" /> 
 
      
 
     </div> 
 
     
 
    </div> 
 
    
 
    </div> 
 
    
 
    
 
</section>

Answer 2

您已受控而50像素全父容器的高度，而你需要給風格獨自頂莢。

其實在應用你的影子，但它背後卻隱藏着你的.container DIV， 你可以看到，通過給保證金（用於在視覺上理解，而不是答案）

.top-bar{margin:10px;} 

應用樣式#top-bar-paragraph而不是.top-bar

#top-bar-paragraph { 
    background-color:#e0f2f1; 
    height:50px; 
    box-shadow: 0px 5px 14px red; 
} 

小提琴here