Html 在自定义div上放置阴影，而不使用放置阴影

我的目标是获得内部有圆角的自定义div，然后在其上放置阴影，因为我们不能使用长方体阴影。我已经完成了这一部分，见下文。 问题是，由于我使用Skrollr，所以由于阴影下降，我有一些延迟。有没有办法在我的自定义div上重新创建这些阴影而不使用阴影

如果有帮助的话，你也可以修改我做弯角的方式

谢谢你的帮助

html，正文{ 保证金：0； 填充：0； } .框架{ 滤波器：0 8px 16px rgba0,0,0,0.5； 边缘顶部：12雷姆； } .tile1{ 背景图像：101.4%0px的径向梯度圆，rgba0，0，0，0，RGB222184135，0 105px，珊瑚105px； 高度：300px； } .tile2{ 背景图像：径向梯度圆在-1.4%0px，rgba0，0，0，0，RGB222184135，0 105px，珊瑚105px； 高度：300px； } 自定义分区

---

也许用伪元素变成阴影

看起来不一样

见下文

html， 身体{ 保证金：0； 填充：0； 高度：200vh； } .框架{ 边缘顶部：12雷姆； 宽度：500px； 保证金：100像素自动； } .tile1{ 背景图像：101.4%0px、rgba0、0、0、0、rgb222、184、135、0 105px、珊瑚105px的径向梯度圆； 高度：300px； 滤波器：0 8px 16px rgba0,0,0,0.5； } .tile2{ 位置：相对位置； 背景图像：径向梯度圆在-1.4%0px，rgba0，0，0，0，rgb222，184，135，0 105px，珊瑚105px； 高度：300px； } .tile2：：之后{ 内容：； z指数：-1； 顶部：0px； 左：8px； 过滤器：16像素； 位置：绝对位置； 背景图像：径向梯度圆在-1.4%0px，rgba0，0，0，0，rgb222，184，135，0 105px，rgba0，0，0，1 105px； 身高：100%； 宽度：100%； } 自定义分区

---

这个问题是与过滤器属性有关还是只与阴影值有关？我从来没有问过自己这个问题，但现在我尝试了驴子的解决方案，我仍然观察到一些滞后，所以可能是因为过滤器属性。所以问题变成了有没有一种方法可以在没有滤镜属性的情况下获得这些阴影？谢谢你的解决方案，这是一个很好的尝试，但我仍然有一些滞后，所以现在我认为这是因为滤镜属性。太糟糕了，因为调整了一些值，我得到了与以前相同的结果。你知道没有滤镜属性重建这些阴影的另一个解决方案吗？一个没有滤镜的阴影和盒子阴影，mh。。。我将画一个阴影图像，并使其看起来像容器阴影。但在我的测试中，当动画左：0到左：300px时，没有看到延迟。也许是太多的动画在同一时间移动？这是因为Skrollr，否则，当然，没有滞后。而滞后也只会出现在狩猎中，我会尝试去画它。非常感谢。