盒子阴影不能按预期工作

时间:2013-06-05 13:41:12

标签: css3

我在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

1 个答案:

答案 0 :(得分:1)

你有2个问题

标题中的header_2类声明了白色背景,这使阴影很难看到。

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

结果:

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