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

2022年09月25日 技术资料 718 views 0

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

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


<img style="box-shadow:2px 4px 8px #3723a1" src="logo.png" alt="itcat.cn">



像这种情况,我们需要用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="itcat.cn">




drop-shadow兼容性

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

分享到:
赞🧧赏

发表评论

欢迎交流:

欢迎您朋友:

1、本站无广告推广,免费分享

2、内容错误纠错欢迎反馈站长

3、新版解压密码看我QQ空间,或留言

     纯净共享奉献,站长非24小时在线



By iT猫itcat.cn 宣