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));
	}
	```