箱子阴影不按预期工作

Question

我发现这个漂亮的箱子阴影示例：http://www.paulund.co.uk/creating-different-css3-box-shadows-effects。

我想在我建立的网站模板上应用效果编号2，但是如果我使用示例2中的代码在网站中的任何地方工作正常，但只要我把它放在标题里面，影子不会拿出了：

<header class="header_w clearfix"> 
    <section> 

     <div class="logo_w"> 
      <h2>Logo</h2> 
     </div> 

     <div class="box2 effect2"></div> // suppose to get the shadow effect but not 

    </section> 

    <nav class="nav"> 
     <ul> 
      <li>Nav element</li> 
      <li>Nav element</li> 
      <li>Nav element</li> 
      <li>Nav element</li> 
      <li>Nav element</li> 
      <li>Nav element</li> 
     </ul> 
    </nav> 

</header> 

全部代码在这里：http://jsfiddle.net/3NDMB/1/

TKS

Answer 1

你有2个问题

标题中的header_2类表示白色背景，这使得阴影难以看清。

而你的box2类的高度太高，这也使得阴影不可见。我将它改为80像素。

其结果是：

[http://jsfiddle.net/vals/3NDMB/2/]