SVG小技巧:CSS filter:drop-shadow 妙使用

  • 时间:2018-06-17 21:00 作者:吐泡泡鱼 来源:吐泡泡鱼 阅读:273
  • 扫一扫,手机访问
摘要:假设现在有这样一个需求,视觉需要给下面这张SVG图中的每一个元素都加上阴影,如图所示的阴影效果:大家第一想到的是使用什么来实现呢?要是在之前,想也不使用想,直接是设计师设计好后,切图就了事。现在就得好好想想来,由于CSS3提供来两个实现阴影的属性即:box-shadow和drop-shadow。对前

假设现在有这样一个需求,视觉需要给下面这张SVG图中的每一个元素都加上阴影,如图所示的阴影效果:

SVG小技巧:CSS filter:drop-shadow 妙使用

大家第一想到的是使用什么来实现呢?要是在之前,想也不使用想,直接是设计师设计好后,切图就了事。

现在就得好好想想来,由于CSS3提供来两个实现阴影的属性即:box-shadowdrop-shadow

对前台有兴趣或者者正在学习web前台的小伙伴,能私信小编【学习】就可免费领取2018最新的一整套系统web前台学习教程!

预计大部分人都是想到了使用box-shadow这个属性来实现,先来用它来试试看,看会得到什么效果:

SVG小技巧:CSS filter:drop-shadow 妙使用

我们的需求是需要给每一个鸟都加上阴影,而用box-shadow,则并没有实现我们想要的效果。box-shadow顾名思意“盒阴影”,只是盒子的阴影。所以出现上面的效果也是预料之中了。

这个时候就是该轮到drop-shadow出场了,drop-shadow是CSS3中filter(滤镜)中阴影滤镜,它就符合真实世界的投影,非透明的颜色,就有投影;透明部分,光线穿过,没投影。

而我们的图形恰好又是SVG格式的,每一个元素就是些文本节点,恰好符合drop-shadow概念中的那样,有透明和非透明部分,所以使用它再适合不过了。

drop-shadow语法如下:

filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);

我们只要要用drop-shadow即可以实现我们给每一个元素加阴影的需求:

filter:drop-shadow(-25px 25px 25px rgba(26,58,70,0.7));

仅仅一句即可以实现下图所示的阴影效果:

SVG小技巧:CSS filter:drop-shadow 妙使用

作者: janily

来源:掘金

  • 全部评论(0)
上一篇:css之定位
下一篇:CSS设置文本属性
最新发布的资讯信息
【系统环境|服务器应用】前台开发入门到实战:HTML5语义化元素你真的用的正确吗?(2019-08-22 04:16)
【系统环境|服务器应用】Vue仿微信app页面跳转动画(2019-08-22 04:16)
【系统环境|服务器应用】webstorm使用快捷键快速修正单个文件的style(2019-08-22 04:16)
【系统环境|服务器应用】程序员从学生到阿里经历的5次蜕变:海阔凭鱼跃,天高任鸟飞(2019-08-22 04:16)
【系统环境|服务器应用】var、let、const的区别(2019-08-22 04:16)
【系统环境|服务器应用】mini-ui加载框Indicator 被遮挡问题(2019-08-22 04:15)
【系统环境|服务器应用】【对讲机的那点事】玩对讲机,对于对讲机的亚音你理解吗?(2019-08-22 04:15)
【系统环境|服务器应用】前台中高级面试,内功心法(上)(2019-08-22 04:15)
【系统环境|服务器应用】17、改进轮播图之功能封装(2019-08-22 04:15)
【系统环境|服务器应用】第10题- 你不知道的delete操作符(2019-08-22 04:15)
手机二维码手机访问领取大礼包
返回顶部