-webkit-filter

-webkit-filter：CSS濾鏡屬性。能夠在元素呈現以前，爲元素渲染提供效果。經常使用於圖像、背景、邊框的渲染。

語法：

ele{
    -webkit-filter: none | blur(px) | brightness() | contrast() | grayscale() | hue-rotate(deg) | invert() | opacity() | 
　　　　　　　　　　　　saturate() | sepia() | drop-shadow( radius )| url();    /*chrome,  safari, opera*/
    filter: none | blur(px) | brightness() | contrast() | grayscale() | hue-rotate(deg) | invert() | opacity() | 
　　　　　　　　　　　　saturate() | sepia() | drop-shadow( radius )| url();

}

其默認值爲none，不能繼承，其JavaScript語法爲：object.style.WebkitFilter = " ";

注：IE不支持filter。

可選值：

• none，默認值，無效果。
• blur(px)，高斯模糊。
• brightness(%)，亮度。
• contrast(%)，對比度。
• grayscale(%)，灰度。
• hue-rotate(%)，色相旋轉。
• invert(%)，反色。
• opacity(%)，透明度。
• saturate(%)，飽和度。
• sepia(%)，褐色。
• drop-shadow(radius)，陰影。
• url()，URL函數接受一個XML文件，該文件設置了 一個SVG濾鏡，且能夠包含一個錨點來指定一個具體的濾鏡元素。

簡單效果：

　　原圖

　　

　　◊ blur()   5px模糊程度

 img{
       -webkit-filter: blur(5px);
       filter: blur(5px);
    }

　　　　

　　◊ brightness()  180%亮度

img{
     -webkit-filter: brightness(180%);
     filter: brightness(180%);
    }

　　　    　

      ◊ contrast()  200%對比度

img{
     -webkit-filter: contrast(200%);
     filter: contrast(200%);
   }

　　　　

　　◊ grayscale()  100%灰度

img{
       -webkit-filter: grayscale(100%);
       filter: grayscale(100%);
     }

　　　　

　　◊ hue-rotate()   180deg 色相旋轉

img{
      -webkit-filter: hue-rotate(180deg);
      filter: hue-rotate(180deg);
     }

　　　　

　　◊ invert()  100%反色

img{
       -webkit-filter: invert(100%);
       filter: invert(100%);
    }

　　　　

　　◊ opacity()  50%透明度

img{
       -webkit-filter: opacity(50%);
       filter: opacity(50%);
    }

　　　　

　　◊ saturate()  200%飽和度

img{
     -webkit-filter: saturate(200%);
     filter: saturate(200%);
     }

　　　　

　　◊ sepia()  100%褐色

img{
     -webkit-filter: sepia(100%);
     filter: sepia(100%);
   }

　　　　

　　◊ drop-shadow()  陰影

img{
     -webkit-filter: drop-shadow(10px 10px 15px green);
      filter: drop-shadow(10px 10px 15px green);
     }