CSS-滤镜属性

      CSS中的滤镜与photoshop中的滤镜相似，她可以用很简单的方法对网页中的对象进行特效处理。使用滤镜属性可以把一些特殊效果添加到网页元素中，是网页更加美观。

1.1不透明度 alpha

语法：

filter:alpha(参数1=参数值，参数2=参数值，.....)

举例：修改所有图片的颜色为黑白 (100% 灰度):

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

1.2动感模糊blur

blur属性用于设置对象的动态模糊效果。

语法：

filter:blur(add=参数值，direction=参数值，strength=参数值)

说明 :blur属性中的参数如表：

add	设置是否显示原始图片
direction	设置动态模糊的方向，按顺时针的方向以45度为单位进行积累
strength	设置动态模糊的强度，只能使用整数来指定，默认是5个

模糊实例

图片使用高斯模糊效果：

img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}

1.3 对颜色进行透明处理 chroma

chroma 滤镜的作用是将图片中的某种颜色转换为透明色，产生透明效果。

语法：

filter:chroma(color=颜色代码或颜色关键字)

举例：

img {
    -webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
    filter: opacity(30%);
}

1.4 阴影效果dropShadow

dropShadow 滤镜用于设置在指定的方向和位置上产生阴影效果。

语法：

color属性控制阴影的颜色；

offX 和 offy 分别设置阴影相对于原始图像移动的水平距离和垂直距离；

positive 属性设置阴影是否透明。

img {
    -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px red);
}