都是写阴影box-shadow跟drop-shadow有啥不同

drop-shadow是css3的filter滤镜属性的一个方法，它的主要作用是用来做阴影，下图是它的兼容性。

理论

本章我们主要来说一下【drop-shadow】和【box-shadow】的区别。
box-shadow和drop-shadow从功能上来都是给元素加阴影。从写法上来说，看起来很相似。

// box-shadow
box-shadow: x(水平位置), y(垂直位置), blur(模糊度), spread(扩散大小), color(颜色, inset(内/外阴影)，
// drop-shadow
filter: drop-shadow(offset-x ,offset-y, blur-radius, spread-radius, color)

这来看，两者的差距是只有【内/外阴影不同】，但按照MDN的官方定义上来说：【drop-shadow】是(投影/阴影)，所以他俩肯定是有区别的，根据实验的结果来说：【box-shadow】是给物体的“盒子”添加阴影，【drop-shadow】是给物体添加阴影

---

实战

通过一个例子来解释结果，我有一张透明背景的图片。
分别用【box-shadow】和【drop-shadow】来给它添加阴影

box-shadow

// html
<img src="./handShank.png" alt="手柄" class="handShank">
// css
box-shadow: 3px 3px 5px #333333

drop-shadow

// html
<img src="./handShank.png" alt="手柄" class="handShank">
// css
filter: drop-shadow(10px 10px 10px #333333)

结果

【box-shadow】是给它的整个物体外部添加阴影没有对内部产生阴影效果。
【drop-shadow】则直接对这个整体进行了一次“光照”。
这其实就是他俩的本质区别，由此我们也能很轻松的解决比如对话框，特殊图形这些复杂形状的阴影化。
【对话框】

// html
 <div class="drop-shadow-box">
   <div class="triangle"></div>
   <span class="content">
     扫描下面二维码关注我呦～
   </span>
</div>
// css
.drop-shadow-box {
    width: 100px;
    height: 50px;
    margin: 20px;
    padding: 0 10px;
    background-color: #ffffff;
    filter: drop-shadow(0px 0px 5px #6e6e6e);
}
.triangle {
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #ffffff transparent;
    position: relative;
    top: -20px;
    left: 10px;
    margin-bottom: -20px;
}

结束

如果你觉得这篇文章对你有帮助，请帮我点个喜欢
关注【前端小白的成长记录】每天一篇优质【小技巧】文章
后台回复你想看的资料，比如React。我会找到相关的【视频】和【电子书】发给你。