div的四个边中的3个的盒子阴影

Question

我有两个坐在彼此顶部的div，我想要一个围绕着它们的阴影。我无法将div中的2个div包装起来。

如何在顶部div的顶部，左侧和右侧仅显示阴影，仅在底部div的底部，左侧和右侧设置阴影？

现在我有以下内容 -

#topDiv, #bottomDiv
{
    box-shadow: 2px 2px 10px 5px #909090; 
    -webkit-box-shadow: 2px 2px 10px 5px #909090; 
    -moz-box-shadow: 2px 2px 10px 5px #909090;   
}

Answer 1

您可以通过剪辑将div设置为绝对值：

#topDiv, #bottomDiv
{
    box-shadow: 2px 2px 10px 5px #909090; 
    -webkit-box-shadow: 2px 2px 10px 5px #909090; 
    -moz-box-shadow: 2px 2px 10px 5px #909090;   
    position: absolute;
    height: 100px;
    width: 100px;
    background-color: lightyellow;
    border: solid 1px red;
}

#topDiv {
    left: 15px;
    top: 10px;
    clip: rect(0px, 120px, 150px, -10px); 
}

#bottomDiv {
    left: 150px;
    top: 10px;
    clip: rect(-10px, 120px, 102px, -10px); 
}

demo

Answer 2

你不能只在三面渲染它，因为它实际上是元素本身背后的一个大模糊块。我发现伪造它的最好方法就是将它向下移动到Y轴并调整值直到看起来很好。

您还可以尝试::before和::after并尝试制作一个带有盒子阴影的2/3高度伪元素，但同样，这是一个黑客攻击，它还需要调整好看。