4

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

截屏

我一直试图用一个覆盖重叠框阴影的伪元素来达到这个结果，但是因为它们需要具有透明度，我似乎无法找到一个解决方案，其中框的边缘既没有小的重叠伪元素也不会调整到正确的宽度。顶框也不一定需要顶边框来解决我的问题。

小提琴

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 和一个伪元素，以防只需要 box-sizing blur 而不需要传播。

小提琴：

模糊和传播结合（JS），

只有模糊，没有传播（无 JS）

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

截屏

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

如果有人仅使用 css 找到与第一个小提琴类似的结果的解决方案，我将不胜感激。

4

2 回答 2

2

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

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

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>

于 2015-07-25T07:58:12.220 回答
0

如果您真的需要纯色背景而不是背景图像，这将起作用：我使用 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);     
}
于 2015-07-25T03:56:28.983 回答