都是写阴影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

// css
box-shadow: 3px 3px 5px #333333

box-shadow

drop-shadow

// html

// css
filter: drop-shadow(10px 10px 10px #333333)

drop-shadow

结果

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

对话框

// html
 

   

   
     扫描下面二维码关注我呦～
   

// 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;
}

结束

如果你觉得这篇文章对你有帮助，请帮我点个喜欢
关注【前端小白的成长记录】每天一篇优质【小技巧】文章
后台回复【资料】，送你优质前端资料。

前端小白的成长记录

我还有1个交流学习群，有兴趣的可以扫描一下，大家相互学习。

交流学习群