筆記-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：波浪的強度大小。