资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

CSS的filter:drop-shadow怎么使用

这篇文章主要介绍了CSS的filter:drop-shadow怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇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));

关于“CSS的filter:drop-shadow怎么使用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“CSS的filter:drop-shadow怎么使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。


网站栏目:CSS的filter:drop-shadow怎么使用
转载注明:http://cdkjz.cn/article/jdcjsp.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220