CSS剪切路径阴影Firefox

Question

the below code用于显示具有3d透视图，框架和阴影的图像。

.sh{
        --valorshadow: -20px  30px  10px  rgba(0, 0, 0, 0.3);
        filter:  drop-shadow(var(--valorshadow));

      } 

      .box { 
        --x: 10px; 
        --y: 30px; 
        --o:10px; 
        clip-path:polygon( 0 calc(var(--x) + var(--y)),var(--y) var(--y), 
        calc(100% - var(--y)) var(--y),calc(100% - var(--y)) calc(100% - var(--y)), var(--y) calc(100% - var(--y)),0 calc(100% - var(--x) - var(--y)));
        -webkit-mask:linear-gradient(to right,rgba(0,0,0,0.88) var(--y), #fff 0); 
        mask:linear-gradient(to right,rgba(0,0,0,0.7) var(--y), #fff 0); 
        margin: 30px; 
        transform-origin: left; 
        transform: perspective(1000px) rotateY(35deg); 
        outline: calc(var(--y) + var(--o)) solid rgba(0, 0, 0, 1); 
        outline-offset: calc(-1*(var(--y) + var(--o))); }

<div class="sh">
        <img src="https://c4.wallpaperflare.com/wallpaper/391/773/307/art-artistic-artwork-creative-wallpaper-preview.jpg"  class="box">

    </div>

框架使用剪切路径，因此我必须使用阴影而不是盒形阴影制作阴影。 其他浏览器中的代码：

Firefox中的代码：

一切都是完美的，直到我在Firefox中看到它为止，底线都消失了。 我该如何解决？