css实现阴影效果box-shadow与滤镜(filter)

实现不规则阴影效果

常见的样式 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));}```