CSS滤镜效果大全详解

CSS 滤镜 效果 大全 详解 滤镜效果 描述 Alpha 设置透明度 Blru 建立模糊效果 Chroma 把指定的颜色设置为透明 DropShadow 建立一种偏移的影象轮廓，即投射阴影 FlipH 水平反转 FlipV 垂直反转 Glow 为对象的外边界增加光效 Grayscale 降低图片的彩色度 Invert 将色彩、饱和度以及亮度值完全反转建立底片效果 Light 在一个对象上进行灯光投影 Mask 为一个对象建立透明膜 Shadow 建立一个对象的固体轮廓，即阴影效果 Wave 在X 轴和Y 轴方向利用正弦波纹打乱图片 Xray 只显示对象的轮廓 一、Alpha 滤镜 Alpha 是来设置透明度的。先来看一下它的表达格式： filter：alpha（opacity=opcity，finishopacity=finishopacity，style=style，startX=startX，startY=startY，finishX=finishX，finishY=finishY） Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。 Style 参数指定了透明区域的形状特征。style 属性：设置渐变风格。0表示均匀渐变；1代表线形；2代表放射状；3表示直角渐变。 Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。 StartX 和StartY 代表渐变透明效果的开始坐标，finishX 和finishY 代表渐变透明效果的结束坐标。 而 width:100%则表示参与渐变的对象的宽度，通常都设置为100% 从上面讲的我们可以看出，如果不设置透明渐变效果，那么只需设置 opacity这一个参数就可以了 二、Motion Blur 滤镜 CSS 下的blur 属性产生模糊的效果。 先来看一下blu r 属性的表达式： filter：blu r（add=add，direction，strength=strength） 我们看到blu r 属性有三个参数：add、direction、strength。 ADD 属性是用来确定是否在运动模糊中使用原有目标。Add 参数有两个参数值：false 和tru e，或者用0和1。0（或者 false）表示“否”，用于文字。1（或者 tru e）表示“是”，用于图像。 意思是指定图片是否被改变成模糊效果。 Direction 参数用来设置模糊的方向。值为0－360。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。角度方向的对应关系见下表： 0 --- 上部 45 --- 右上部 90 --- 右部 135 --- 右下部 180 --- 下部 225 --- 左下部 270 ---左部 315 ---左上部 Strength 属性是模糊移动的距离。Strength 参数...