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

【问题标题】：Two CSS3 Drop Shadows (Left/Riight and Left/Right/Bottom)两个 CSS3 投影（左/右和左/右/下）
【发布时间】：2014-08-21 21:58:12
【问题描述】：

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

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

当我尝试将阴影编辑为“测试”时，阴影就消失了。很可能我使用错误的代码。下面是 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 的代码。谢谢。

【问题讨论】：

您不再需要 box-shadow 上的供应商前缀。仅供参考。
好的，不用担心-webkit和-moz？
知道了。我删除了 webkit 和 moz，它似乎可以在最新的浏览器上运行。
caniuse.com 会告诉您该属性是否受支持以及需要哪些供应商前缀。 Box-shadow 现在已经完全实现，因此不需要前缀。

标签： wordpress css html dropshadow

【解决方案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 更简洁，更容易实现。

【讨论】：

感谢您的帮助。我会试一试，然后回复你。
谢谢，我能够将内容和页脚 div 包装在我创建的新 div 中。现在一切正常。 :)

【解决方案2】：

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

【讨论】：

嘿为什么是-1？我只是想通过提供一个在线工具的参考来帮助你！
我没有 -1 你。感谢您的帮助。 :)

【解决方案3】：

我能够通过将内容和页脚 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 中传播。我希望这对某人有所帮助。

【讨论】：