Box-shadow不适用于

Question

我未能在某个部分获得阴影。它看起来应该是这样的。

你是否在底部边框下看到轻微的阴影。

我的代码看起来像这样：

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

我想知道为什么它没有成功。也许我的语法不正确。如果您需要更多详细信息，请参阅Codepen

中的项目

Answer 1

您已将整个父容器的高度控制为50px，而您需要仅为顶部容器指定样式。

实际上你的影子已应用，但它隐藏在你的.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

Answer 2

将position: relative提供给顶栏

box-shadow仅适用于非继承定位section

以下是 Demo

* {
  padding:0;
  margin:0;
}
.top-bar {
  background-color:#e0f2f1;
  height:50px;
  box-shadow: 0px 5px 14px green;
	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>