css3的滤镜效果（组合CSS3滤镜的几个属性）

点击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

通常而言，我们要想做一个元素具有阴影的效果，应该怎么处理。

常见的方法大概有这么几种方式：

1、box-shadow - 给框添加一个或多个阴影

2、text-shadow- 给字体添加阴影

3、filter：drop-shadow - 生成整体阴影效果，和box-shadow相似。

大家有没有发现，上面这些方式生成的阴影都只能是单色的。

如此说来，其实我们可以生成模拟的渐变或者颜色比较丰富的阴影效果。怎么实现了？

组合使用CSS3滤镜属性（blur，brightness，opacity），这三个属性的用法上一篇有做过介绍，也很简单。

一，详述过程

例子的DOM结构：

用一张图片给div.avator设置一个背景。然后在div.avator上利用伪元素生成一个与原图上一样大小的新图叠加在原图之下，在利用滤镜模糊blur配合其他的亮度/对比度，透明度等滤镜，就可以完成一个虚幻的影子，伪装成原图的阴影效果，核心代码如下：

效果图是这样的：

下面我将伪元素的scale在放大一倍，看看什么效果：

出现另外一种不一样的效果，挺有意思。

二，完整代码

总结一下：

滤镜的应用远不止这个阴影，还有好多，主要看我们怎么组合，想要什么效果。后面我也会再举一些实用的例子。

,