大发快3

欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS技巧 >

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

 

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

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

 

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

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

对前端有大发快3兴趣或者正在学习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偏移, 模糊大小, 色值);

我们大发快3只需要使用drop-shadow就可以实现我们给每一个元素加阴影的需求:

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

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

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

如需转载,请注明文章出处和来源网址:http://t-lbs.com/jiqiao/j50868.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTM大发快3L基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到C大发快3SS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-09-18 20:50 原创:DIVCSS5
本文t-lbs.com DIVCSS5版权所有。