如何通过css,在网页中实现png图片透明加阴影效果

fox/ 2023年07月28日/ CSS教程/ 浏览 1869

在网页实现中,我们经常用css的box-shadow参数来为模型盒添加阴影,但是在一些应用了透明png的地方,这种阴影就不适合了。


我们可以通过css的另一种参数,为透明png实现基于透明图片的阴影效果,效果如下图,左侧是box-shadow,右侧是drop-shadow。


具体实现,看参考以下css



.box-shadow {
  box-shadow: 2px 4px 8px #3723a1;
}

.drop-shadow {
  filter: drop-shadow(2px 4px 8px #3723a1);
}

发表评论

暂无评论,抢个沙发...

客服 工单