相邻元素的盒子阴影可变宽度

Question

我正在尝试在两个元素上添加一个框阴影，每个元素都有可变宽度。我想要的结果如下：

我一直试图通过覆盖重叠框阴影的伪元素来获得此结果，但由于它们需要具有透明度，我似乎无法找到边缘上没有小重叠的解决方案的框和伪元素调整到正确的宽度。 顶盒也不一定需要顶部边框来解决我的问题。

Fiddle

HTML：

<div>
    <p></p>
</div>
<div>
    <p></p>
</div>

SCSS：

div {
    display: inline-block;
    margin: 75px;
    width: 200px;
    height: 50px;
    position: relative;
    p {
        position: absolute;
        top: 100%;
        left: 0;
        height: 300px;
        width: 250px;
    }
    &, p {
        background: #ededed;
    }
}
div:last-child p {
    width: 150px
}

div {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
    p {
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
    }    
}

修改

通常我不会考虑JS的布局，但因为在我的特定情况下，在用户交互发生之前，这些框将不可见，我使用了一个脚本来解决我的问题。 当dom准备好时，脚本会判断顶部元素是否大于底部元素，并分别为其添加“大”或“小”类。通过了解，我们知道伪元素的宽度应该继承哪个元素。只要元素不会以改变哪个元素更大的方式调整大小，这就可以了。

还有一个更清洁的解决方案，不需要JS和一个伪元素，如果只需要一个盒子大小模糊和没有传播。

小提琴：

Blur and spread combined (JS)，

Only blur, no spread (No JS)

最终结果并不完全完美正如您在此屏幕截图中看到的那样，所有白色背景都替换为黑色：

当您查看左侧框的左上角时，您可以看到边框阴影有轻微的曲线。 无论如何，它离我足够近。

如果有人发现的解决方案与第一小提琴只使用css的结果相似，我会非常感激。

Answer 1

你有一个简单的解决方案，但它是一个实验性的功能，它的支持有限。

使用过滤器：在基本元素上投下阴影，投影应用于此元素的复合结果以及所有后代

div {
    display: inline-block;
    margin: 75px;
    width: 150px;
    height: 50px;
    position: relative; 
    -webkit-filter: drop-shadow(0px 0px 5px rgba(255, 0,0,0.7));
    filter: drop-shadow(0px 0px 2px red);
}

div p {
    position: absolute;
    top: 100%;
    left: 0;
    height: 300px;
    width: 250px; 
    margin: 0px;
}

div, div p {
    background: #ededed; 
}

#second p {
  width: 100px; 
}

<div>
    <p></p>
</div>
<div id="second">
    <p></p>
</div>

另一种方法，将在任何浏览器中运行，使用阴影的伪元素：

div {
    display: inline-block;
    margin: 75px;
    width: 150px;
    height: 50px;
    position: relative; 
}

div p {
    position: absolute;
    top: 100%;
    left: 0;
    height: 300px;
    width: 250px; 
    margin: 0px;
}

div, div p {
    background: #ededed; 
}

#second p {
  width: 100px; 
}

div:after, p:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    box-shadow: 0px 0px 2px 6px rgba(0,255,0,0.7);
    z-index: -10;
}

<div>
    <p></p>
</div>
<div id="second">
    <p></p>
</div>

另一种方法是剪切阴影。这是很差的支持，需要大量的手动调整，但最终的结果可能是最好看的。 演示仅适用于webkit

div {
    display: inline-block;
    margin: 75px;
    width: 300px;
    height: 50px;
    position: absolute; 
}

div p {
    position: absolute;
    top: 100%;
    left: 0;
    height: 100px;
    width: 200px; 
    margin: 0px;
}

div, div p {
    background: #ededed; 
}


div:after, p:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    box-shadow: 0px 0px 15px 15px rgba(255,0,0,0.2);
    z-index: -10;
}

p:after {
    -webkit-clip-path: polygon(0% 30px, 230px 30px, 260px 60px, 100% 100%, 0% 100%);
}

div:after {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 260px 100%, 230px 80px, 0% 80px);
    
}

<div>
    <p></p>
</div>

Answer 2

如果你真的需要纯色背景而不是背景图像，这应该有效： 我用div来创建空白区域。

<div class="shad">
    <div class="cover1"></div>
    <p></p>
</div>

<div class="shad">
    <div class="cover2"></div>
    <p></p>    
</div>

段落设置为与div.shad相同的大小。

div.shad {
    display: inline-block;
    margin: 75px;
    width: 250px;
    height: 350px;
    position: relative;
    background: #ededed;
    p {
        position: absolute;
        top: 0%;
        left: 0;
        width: 250px;
        height: 350px;
    }
    .cover1 {
    position: relative;
    float: right;
    margin-top: -2px;
    margin-right: -2px;
    width: 50px;
    height: 50px;
    background-color: white;
    border-left: 2px solid rgba(0, 0, 0, 0.2);
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);    
    }
    .cover2 {
    position: relative;
    float: right;
    margin-top: 50px;
    margin-right: -2px;
    width: 50px;
    height: 300px;
    background-color: white;
    border-top: 2px solid rgba(0, 0, 0, 0.2);
    border-left: 2px solid rgba(0, 0, 0, 0.2);
    }
}

div.shad {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);     
}