CSS 给透明图片增加阴影效果

技巧•2年前• 隔壁老李于 2023-08-17 07:33:02 最后编辑

文章总结

AI正在生成摘要

CSS中，使用box-shadow为透明图片添加阴影会形成边框效果。而filter:drop-shadow可以生成基于图片内部形状的阴影，不会在图片外部形成边框，兼容性较好。

CSS 给透明图片增加阴影效果第1张

说到CSS阴影效果，你肯定会想到box-shadow。

但是你要是用它为透明图片添加阴影，那图片却看起来像是添加了一个边框一样

<img style="box-shadow:2px 4px 8px #3723a1" src="logo.png" alt="隔壁老李">

CSS 给透明图片增加阴影效果第2张

像这种情况，我们需要用filter:drop-shadow。

drop-shadow虽然不像box-shadow那样简单粗暴，但drop-shadow的工作方式是遵循图片的Alpha通道的，通俗点说它生成的阴影是基于图片的内部形状（不透明部分），而不是显示在图片外面，这一点是box-shadow无法实现的

效果像这样

<img style="filter: drop-shadow(2px 4px 8px #3723a1)" src="logo.png" alt="隔壁老李">

CSS 给透明图片增加阴影效果第3张

drop-shadow兼容性

CSS 给透明图片增加阴影效果第4张

赞赏

本文由 @隔壁老李于 2022-09-01 发布在野路子博客，如无特别说明，本博文章均为原创，转载请保留出处。

评论 (2)

霓虹下的誓言

“CSS阴影效果新选择：filter:drop-shadow实现透明图片精准阴影，超越box-shadow局限。”

2024-09-14 09:03:18 · 来自山东省青岛市 · 回复

学费了

2022-10-12 20:17:02 · 来自新加坡 · 回复

Top