笔记 - 10.4、HTML - CSS滤镜笔记

15.CSS滤镜filter：(filter属性不属于w3c标准，只对IE有效)
--- ①不透明度：
   filter:alpha(参数1=参数值, 参数2=参数值, . . .);
   参数：
      -- opacity：开始时的透明度，取值范围为0-100，默认值为0，即为完全透明，100为完全不透明；
      -- finishopacity：结束是的透明度，取值为0-100；
      -- style：设置渐变的样式，其中0表示无渐变，1为直线渐变，2为圆形渐变，3为矩形渐变；
      -- startx：设置透明渐变的开始点的水平坐标。其参数值作为对象宽度的百分比处理，默认值为0；
      -- starty：设置透明渐变的开始点的垂直坐标；
      -- finishx：设置透明渐变的结束点的水平坐标；
      -- finishy：设置透明渐变的结束点的垂直坐标。

--- ②动感模糊blur：
   filter:blur(add=参数值, direction=参数值, strength=参数值);
   参数：
      -- add：设置是否显示原始图片，取值为true或false；
      -- direction：设置动感模糊的方向，按顺时针的方向以45度为单位进行累积；
      -- strength：设置动感模糊的强度，只能使用整数来指定默认是5个。

--- ③对颜色进行透明处理chroma：
   filter:chroma(color=颜色值);
   参数：
      -- color：需要进行透明处理的颜色值。

--- ④阴影效果dropShadow：
   filter:dropShadow(color=阴影颜色, offX=参数值, offY=参数值, positive=参数值);
   参数：
      -- color：阴影的颜色；
      -- offX：阴影相对原始图像的移动的水平距离；
      -- offY：阴影相对原始图像的移动的垂直距离；
      -- positive：设置阴影是否透明，1或0。

--- ⑤对象翻转flipH、flipV：
   flipH滤镜用于设置沿水平方向翻转对象，flipV滤镜用于设置沿垂直方向翻转对象。
   filter:flipH;
   或
   filter:flipV;

--- ⑥发光效果glow：
   用于设置在对象周围产生发光的效果。
   filter:Glow(color=颜色, strength=强度值);
   参数：
      -- color：设置发光的颜色；
      -- strength：设置光的强度。取值为1~255，默认值为5。

--- ⑦灰度处理gray：
   用于把彩色图片中的色彩去掉，转换为黑白图片。
   filter:Gray;

--- ⑧反相invert：
   用于设置图片的反相，可以将图片的颜色，饱和度以及亮度完全反转过来。
   filter:invert;

--- ⑨X光片效果xray：
   用于制作类似X光片的效果。
   filter:Xray;

--- ⑩遮罩效果mask：
   用于为对象产生遮罩效果，可以做出像印章一样的效果。
   filter:Mask(color=颜色);
   参数：
      -- color：颜色值。

--- ⑩①波形滤镜wave：
   用于为对象内容创建波纹扭曲效果。
   filter:wave(add=参数值, freq=参数值, lightstrength=参数值,phase=参数值, strength=参数值);
   参数：
      -- add：设置是否要把对象按照波形样式打乱，true或false；
      -- freq：设置图片上的波浪数目；
      -- lightstrength：设置波浪的光照强度，取值为0~100；
      -- phase：设置波浪的起始位置；
      -- strength：波浪的强度大小。

相关文章：