CSS3滤镜效果提供了一种将视觉效果应用于图像的简便方法。1.模糊效果可以使用blur()函数将类似高斯模糊效果的Photoshop应用于元素。此函数接受CSS长度值作为定义模糊半径的参数。较大的值会产生更多的模糊。如果未提供参数，则使用值0。示例：img.blur{-webkit-filter:blur(2px);/*Chrome、Safari、Opera*/filter:blur(2px);}img.extra-blur{-webkit-filter:blur(5px);/*Chrome,Safari,Opera*/filter:blur(5px);}/*SomeCSStobeautifythisexample*/tabletd{padding:10px;text-align:center;}运行结果：2.设置图片亮度brightness()函数可以用设置图像亮度。值为0%将创建全黑图像。而100%或1的值会使图像保持不变。其他值是效果的线性乘数。也可以将亮度设置为高于100%，这样可以使图像更亮。如果缺少数量参数，则使用值1。不允许负值。示例：img{宽度：200px；height:100px;}img.blur{-webkit-filter:blur(2px);/*Chrome,Safari,Opera*/filter:blur(2px);}img.extra-blur{-webkit-filter:blur(5px);/*Chrome,Safari,Opera*/filter:blur(5px);}/*一些CSS来美化这个例子*/tabletd{padding:10px;text-align:center;}运行结果：注意：75%的过滤函数接受以百分号表示的值（例如）也接受以小数表示的值（例如0.75）。如果该值无效，该函数将返回none并且不会应用滤镜效果。3.调整图像对比度contrast()函数用于调整图像对比度。值为0%将创建全黑图像。而100%或1的值会使图像保持不变。也允许超过100%的值，给出的对比结果较少。如果缺少或省略数量参数，则使用值1。示例：img{width:200px;height:100px;}img.bright{-webkit-filter:contrast(200%);/*Chrome,Safari,Opera*/filter:contrast(200%);}图像。dim{-webkit-filter:contrast(50%);/*Chrome,Safari,Opera*/filter:contrast(50%);}/*一些CSS来美化这个例子*/tabletd{padding:10px;text-align:center;}运行结果：4.给图片添加阴影Photoshop等图片可以使用drop-shadow()函数对图片应用阴影效果。此功能类似于box-shadow属性。示例：img{width:200px;height:100px;}img.shadow{-webkit-filter:drop-shadow(2px2px4pxorange);/*Chrome,Safari,Opera*/filter:drop-shadow(2px2px4pxorange);}img.shadow-large{-webkit-filter:drop-shadow(4px4px10pxorange);/*Chrome,Safari,Opera*/filter:drop-shadow(4px4px10pxorange);}/*一些CSS美化这个例子*/tabletd{padding:10px;text-align:center;}运行结果：注意：drop-shadow()函数的第一个和第二个参数分别指定阴影的水平和垂直偏移，而第三个参数指定模糊半径，最后一个参数指定阴影颜色，就像box-shadow属性一样，但有一个例外，'inset'关键字是不允许的。总结本文以CSS为基础，通过案例详细讲解CSS3滤镜效果的虚化效果、设置图片高度、调整图片对比度、给图片添加阴影等，这些方面让读者更加直观、简单并通过操作后效果图的显示方便移动。代码很简单，希望文章的内容能帮助大家更好的学习。本文转载自微信公众号《前端进阶学习交流》，可通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。
