实现不规则阴影效果
常见的样式 box-shadow
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
drop-shadow才是真正意义上的投影,而box-shadow只是盒阴影
它只会投影出真实图形的阴影
实例: filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
常用环境:
1,伪类三角形悬浮阴影效果
```
.div::after {
position: absolute;
bottom: 20%;
right: 45px;
content: '';
display: block;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #ff8605;
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
}
```
2,各类不规则阴影效果
```
.div {
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
}
```