我正在尝试为我使用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%);
}
}