css - div 四个边中的 3 个上的 box-shadow

Question

我有 2 个 div 彼此叠放，我想要一个围绕它们的阴影。我不能将 2 个 div 包装在一个 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); 
}

演示

Answer 2

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

您也可以尝试::before并::after尝试制作一个带有盒子阴影的 2/3 高的伪元素，但同样，这是一个 hack，需要调整才能看起来不错。