如何将阴影应用于由两个div形成的多边形多边形

Question

我需要为一个多边形应用box-shadow。多边形实际上由两个div组成，总体框是一个div。正如您可能通过图像的阴影效果所知，注意到较大div的阴影如何与整体div的阴影重叠。有什么方法可以使阴影看起来更均匀并整体混合在一起？

总体框的样式：

box-shadow: 0 5px 20px 0 rgba(50, 50, 50, 0.75) inset

为更大的div设计样式：

box-shadow: 0 5px 30px 0 rgba(50, 50, 50, 0.75)

由于

Answer 1

我认为答案会是这样的：

#base {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
    box-shadow: 0 5px 30px 0 rgba(50, 50, 50, 0.75);
}
#box {
    width: 100px;
    height: 100px;
    bottom: 0px;
    position: absolute;
    left: 50px;
    box-shadow: 0 5px 20px 0 rgba(50, 50, 50, 0.75) inset;
}
#box:after {
    content: '';
    width: 100%;
    height: 20px;
    position: absolute;
    bottom: -20px;
    background-image: linear-gradient(90deg, rgba(255, 255, 255,0), rgba(250, 250, 250, 0.75) 10%,rgba(250, 250, 250,0.75) 90%, rgba(255, 255, 255,0));
}

在我试图重现你的布局的第一个样式中，我希望它或多或少准确。

然后我创建一个伪元素，位于有问题的区域。在这个伪元素中，我设置了一个背景，它是一个渐变，从边框中的白色透明到中心的浅灰色。这样我就可以在边框中看到阴影，在中心我设置了我想要的颜色。

Demo

它并不完美，但它证明了这个想法。

它应该如何看待它也是一种品味问题;我不确切地知道你在找什么。

任何方式，玩色彩停止，我认为你可以得到你想要的