一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。
前言
昨天总结了一篇box-shadow基本方法的文章，通过尝试了对属性有了更清晰的认识，今天再来探索一番。
box-shadow和drop-shadow的不同
它们两个的区别还是挺多的，昨天只说了一种（参数不完全相同），下面详细说一下
- 参数个数不同，drop-down和box-shadow相比少了spread、inset属性，要是对基本属性还不了解可以点击这里查看
- 兼容性不同，drop-down比box-shadow的兼容性更差，如果要兼容低版本的浏览器慎用
- 相同属性值下产生的效果也不太一样，这里以blur为例，如下图 box-shadow的效果：
drop-shadow的效果：
drop-shadow和box-shadow在相同的参数下阴影的效果更淡，所以我加了边框并且blur值扩大了很多才看到了如上图的效果fliter:drop-shadow(2px 20px 143px red)
- drop-down不能设置内阴影
- box-down可以使用多重阴影（制作多边框，彩虹，云朵等等），drop-down不支持。。。
box-down和drop-down的终极区别
drop-down才是真正意义上的阴影，box-down只是盒子本身的阴影（也可以理解为就是以盒子为参考生成的另一个元素）
下面分别给一个只有边框透明的div来设置box-shadow和drop-shadow来看看有什么不一样的效果
、
看上图，绿色是正方形用box-shadow产生的阴影，在它的正下方还有一个用drop-shadow属性的正方形，只所以看不到是因为整个正方形都是透明的，现在我们加上边框来看看
这是加了border的效果，可以明显的看到(所以使用drop-shadow的时候一定要给目标元素设置边框或者是背景色，除了透明颜色的都可以，#fff也行)，box-shadow产生的阴影都在盒子外边，drop-shadow产生的阴影即有外边的也有里面的（也就是说只要是透明的部分它都可以产生阴影）
总结
css还是非常神奇的，平常用到的属性太少了，好多能用css做的东西都不知道，还要加强练习
