html 无阴影,html-CSS阴影属性未显示在多边形对象上

我正在尝试为我使用clip-path：多边形CSS属性塑造的div设置样式.我想给它一些阴影,使它看起来有点三维.

问题是shadow属性不起作用.当我在浏览器中检查元素时,阴影的CSS代码显示为灰色.

我尝试通过以下方式制作阴影,但没有一种有效

>框阴影：0 -2px 2px 0 rgba(0,0,0,0.14),0 -3px 1px -2px rgba(0,

0,0,0.12),0 -1px 5px 0 rgba(0,0,0,0.2);

>过滤器：阴影(0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px

rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2));

>过滤器：框阴影0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px

rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);

这是HTML代码：

...some content inside...

和SCSS代码：

#first {

padding-top: 60px;

padding-bottom: 30px;

-webkit-box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.14), 0 -3px 1px -2px rgba(0, 0, 0, 0.12), 0 -1px 5px 0 rgba(0, 0, 0, 0.2);

box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.14), 0 -3px 1px -2px rgba(0, 0, 0, 0.12), 0 -1px 5px 0 rgba(0, 0, 0, 0.2);

.container-fluid {

background: red;

clip-path: polygon(0 0%, 100% 0%, 100% 88%, 0 100%);

}

}