Question

我有一个wordpress网站，我正在努力，我需要将CSS3投影添加到四个元素。 Content-menu-wrapper独立于其他div（未以图形方式连接）并且功能齐全。

下一个div是内容包装器，页脚，页脚底部。每个div都以图形方式“连接”在一起。内容包装器需要顶部，左侧和右侧的阴影。页脚左右需要阴影。页脚底部需要左，右和底部的阴影。

当我尝试将阴影编辑为“测试”时，阴影就会消失。我很可能使用错误的代码。下面是content-menu-wrapper的功能代码。

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的代码。谢谢。

Answer 1

左右很容易：

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

让三面看起来很好然而真的很难，因为使用上述技术在角落里存在间隙。

我的建议是将所有元素都包含在包装div中，然后将box-shadow应用于此。保持CSS更清洁，更容易启动。

Answer 2

使用this online tool获取div的阴影的css。

Answer 3

我能够通过将内容和页脚div包含在每个jimjimmy上面的答案中更大的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);
}

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

保存文件，现在它将/应该在整个wordpress中传播。我希望这能以某种方式帮助某人。

两个CSS3投影（左/右和左/右/下）

3 个答案: