分类

商品

商品

店铺

资讯

热门搜索 : WordPress 织梦企业官网小说源码 Discuz

服务器低至9.9￥/月

当前位置：首页 > 资讯 > 网页前端 > CSS

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

时间：2018-06-17 21:00 作者：吐泡泡鱼来源：吐泡泡鱼阅读：596
扫一扫，手机访问

摘要：假设现在有这样一个需求，视觉需要给下面这张SVG图中的每一个元素都加上阴影，如图所示的阴影效果：大家第一想到的是使用什么来实现呢？要是在之前，想也不使用想，直接是设计师设计好后，切图就了事。现在就得好好想想来，由于CSS3提供来两个实现阴影的属性即：box-shadow和drop-shadow。对前

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

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

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

现在就得好好想想来，由于CSS3提供来两个实现阴影的属性即：box-shadow和drop-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设置文本属性

最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析：盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问，肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题：JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错：Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)

微分网络

店铺

血鸟云

推荐商品

资讯排行榜
更多>>

手机访问领取大礼包