0

我有一个正在开发的 wordpress 网站，我需要将 CSS3 阴影添加到四个元素。Content-menu-wrapper 独立于其他 div（未以图形方式连接）并且可以正常工作。

下一个 div 是内容包装器、页脚、页脚底部。每个 div 以图形方式“连接”一个在另一个之上。内容包装器需要顶部、左侧和右侧的阴影。页脚需要左右阴影。Footer-bottom 需要在左、右和底部有阴影。

当我尝试将阴影编辑为“测试”时，阴影就消失了。很可能我使用错误的代码。下面是内容菜单包装器的功能代码。

CSS：

#content-menu-wrapper
{
    background-color: white;
    margin:0px auto 15px auto;
    height: 32px;
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}

请帮助我提供其他三个 div 的代码。谢谢你。

4

3 回答 3

3

左右很容易：

box-shadow: -15px 0 15px -15px rgba(0, 0, 0, 0.6),
             15px 0 15px -15px rgba(0, 0, 0, 0.6);

然而，让三个侧面看起来不错是非常困难的，因为使用上述技术在角落有间隙。

我的建议是将所有元素包含在一个包装 div 中并将其应用于该 div box-shadow。使 CSS 更干净，更容易实现。

于 2013-02-12T02:34:15.010 回答
0

使用此在线工具为您的 div 获取阴影的 css。

于 2013-02-12T02:15:11.333 回答
0

根据上面jimjimmy的回答，我可以通过将内容和页脚div包装在一个更大的div中来解决这个问题。这些是细节：首先我在 common.css 中创建了一个新的 div id，“content-shadow”。

然后我添加了 box-shadow 属性以及我的 content-wrapper div 中的复制/粘贴属性，以便网站的格式正确。就我而言，它看起来像这样：

#content-shadow {

    border-left:0px solid #E7E7E7;
    border-right:0px solid #E7E7E7; 
    border-bottom:0px solid #E7E7E7;
    border-top:0px solid #E7E7E7;
    background-color:#FFFFFF;
    margin:0px auto 0px auto;
    margin-bottom:0px;
    margin-top:0px;
    width: 1000px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}

接下来，我在我的主题的 header.php 文件中放置了一个 div，位于“content-wrapper”div 之前。保存该文件我移到了 footer.php 文件，并在文件末尾的适当位置放置了一个标签。对我来说，这是在“content-bottom-empty-space”div 之上，所以我可以在我的网站底部留出一点空间。

保存文件，现在它将/应该在整个 wordpress 中传播。我希望这对某人有所帮助。

于 2013-02-12T15:19:19.713 回答