仅通过 css 无法在底部创建 SVG 多边形的框阴影

如何解决仅通过 css 无法在底部创建 SVG 多边形的框阴影

代码是 reactJS 项目的一部分。 SVG的多边形如下：

return ( <div>
        <svg width={this.state.width} height={this.state.height} viewBox={"0 0 "+this.state.width+" "+this.state.height} xmlns="http://www.w3.org/2000/svg">
        <path onClick={e=>this.getMenu(e)} d={"M "+this.state.width/2+" 0 l -10 20 l 20 0 z"} stroke="green" stroke-width="3" fill="green" />
        <path d={"M "+this.state.width/2+" 0 l -10 20 l 20 0 z"} stroke="green" stroke-width="3" fill="none" transform={"rotate(180 "+this.state.width/2+" "+10+")"}/>
        <polygon points={this.state.polygon1} stroke="none" stroke-width="10" fill="#BBB" opacity="0.8"/>
        <defs>
        <linearGradient id="grad" x2="0" y2="1">
            <stop offset="0" stop-color="#BBB"/>
            <stop offset="1" stop-color="#FFF"/>
        </linearGradient>
        </defs>
        <polygon className="curtain" points={this.state.polygon}/>
        </svg>
    </div> );

对应的CSS如下：

.curtain{
  margin-top: 1em;
  stroke-width: 0;
  stroke: aliceblue;
  -moz-Box-shadow: 0 4px 2px -2px gray;
  -webkit-Box-shadow: 0 4px 2px -2px gray;
  Box-shadow: 0 4px 2px -2px gray;
  fill: url(#grad);
}

结果如下：

但是当 css 的其他属性正常时，Box-shadow 不起作用。有人可以在这方面帮忙指出错误吗？