在一个博客上看到了透明图片CSS阴影效果，却不知道是用什么做的，直到有一天终于发现了，你肯定会想到box-shadow。但是你要是用它为透明图片添加阴影，那图片却看起来像是添加了一个边框一样。比如：
代码演示：
<img style="box-shadow:2px 4px 8px #3723a1" src="logo.png" alt="找寻开心">
像这种情况，我们需要用filter:drop-shadow。
drop-shadow虽然不像box-shadow那样简单粗暴，但drop-shadow的工作方式是遵循图片的AIpha通道的，通俗点说它生成的阴影是基于图片的内部形状(不透明部分)，而不是显示在图片外面，这点是box-shadow无法实现的 。
代码演示：
<img style="filter: drop-shadow(2px 4px 8px #3723a1)" src="logo.png" alt="找寻开心">
谢谢赞赏
（微信）
1 评论