最近开始研究css的各种奇妙的用法，励志做一个能用css写出奇幻动画效果的程序媛。
drop-shadow和box-shadow相似，都是实现投影效果，box-shadow的使用更加常见一些，那么这两种阴影的实现有什么差异呢？
先具体说说drop-shadow的用法。
filter: drop-shadow(20px 10px 4px #4444dd)
语法：
drop-shadow(offset-x offset-y blur-radius spread-radius color)
参数：
offset-x offset-y （必须）：x偏移和y偏移
blur-radius（可选）：模糊大小，默认为0
spread-radius（可选）：但是大多数浏览器不支持这个参数
color（可选）：色值
可以看到和box-shadow的参数类似，但是不同的是drop-shadow没有inset内阴影，不能阴影叠加。
drop-shadow是CSS3中filter的阴影滤镜。相较于box-shadow而言，他更像真实世界的投影，非透明的颜色下，有投影；透明的部分，光线穿过，无投影。
以下我们从几个方面来比较以下两者的区别
一、兼容性
二、参数值一样，表现效果有差异
<!DOCTYPE html>
<html>
<head>
<title>效果展示</title>
<style>
.box {
margin: 40px; padding: 50px;
width: 300px;
background-color: #fff;
position: relative;
font-size: 24px;
}
.cor {
position: absolute;
left: -40px;
width: 0;
height: 0;
overflow: hidden;
border: 20px solid transparent;
border-right-color: #fff;
}
.drop-shadow {
filter: drop-shadow(5px 5px 10px black);
}
.box-shadow{
box-shadow: 5px 5px 10px black;
}
</style>
</head>
<body>
<div class="box drop-shadow">
<i class="cor"></i>
filter: drop-shadow
</div>
<div class="box box-shadow">
<i class="cor"></i>
box-shadow
</div>
</body>
</html>
三、drop-shadow不能阴影叠加
box-shadow有个很厉害的地方，就是阴影可以任意叠加，因此可以作出很多不同效果的图片，比如：
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:100px;
height:100px;
margin:50px auto;
background:deeppink;
border-radius:50%;
box-shadow:
120px 0px 0 -10px #795548,
95px 20px 0 0px #607D8B,
30px 30px 0 -10px green,
90px -20px 0 0px #FFC107,
40px -40px 0 0px #2196F3;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
transform: translate(-50%, -50%);
border-radius: 50%;
background-image: radial-gradient(#fff 38%, transparent 38%), radial-gradient(#09C 0, #09C 100%)
}
div:before {
content: "";
width: 285px;
height: 122px;
background: 0 0;
border-radius: 100%;
position: absolute;
top: 33px;
left: -45px;
margin: auto;
box-shadow: inset 0 12px 0 13px #09c, -35px -8px 0 -5px #fff;
transform: rotate(-35deg)
}
div:after {
content: "";
width: 120px;
height: 25px;
background: #09c;
position: absolute;
top: 80px;
left: 0;
right: 0;
margin: auto;
box-shadow: 50px 23px 0 -2px #fff
}
</style>
</head>
<body>
<div></div>
</body>
</html>
虽然drop-shadow不能阴影叠加，但是它有一个很厉害的特性，就是它才是真正意义上的投影！而box-shadow只是盒阴影而已。
盒阴影 VS 投影
下面有个更加直观的例子
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 10px dashed #beceeb;
width: 100px;
height: 100px;
margin: 50px;
}
.box-shadow {
box-shadow: 5px 5px 10px black;
}
.drop-shadow {
filter: drop-shadow(5px 5px 10px black);
}
</style>
</head>
<body>
<div class="box-shadow"></div>
<div class="drop-shadow"></div>
</body>
</html>
看到这就明白了吧？ drop-shadow不仅可以穿透代码构建的元素的透明部分，还可以穿透png图片的透明部分哦！
此文章参考张鑫旭大神、MDN docs等资料写成。此文章仅供本人学习记录用。
张鑫旭：CSS3 filter:drop-shadow滤镜与box-shadow区别应用
MDN：drop-shadow
