wordpress - 两个 CSS3 投影(左/右和左/右/下)

Question

我有一个正在开发的 wordpress 网站，我需要为四个元素添加 CSS3 投影。 Content-menu-wrapper 独立于其他 div(没有图形连接)并且是功能性的。

接下来的 div 是内容包装、页脚、页脚底部。每个 div 都在图形上“连接”在另一个之上。 Content-wrapper 需要在顶部、左侧和右侧添加阴影。页脚需要左右阴影。页脚底部需要在左侧、右侧和底部有阴影。

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

然而，要使三个边看起来不错真的很难，因为使用上述技术时， Angular 处会出现缝隙。

我的建议是将所有元素封装在一个包装 div 中，并对其应用 box-shadow。使 CSS 更加简洁并且更容易实现。