2

我需要为一个总体多边形应用 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)

谢谢

在此处输入图像描述

4

1 回答 1

0

我认为答案是这样的：

#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));
}

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

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

演示

它并不完美，但它展示了这个想法。

它应该看起来如何也是一个品味问题；我不知道你在找什么。

无论如何，玩色标，我认为你可以得到你想要的

于 2013-07-19T10:03:35.707 回答