CSS3濾鏡

瀏覽器支持

css3濾鏡的功能看起來非常酷炫，省去了不少處理圖片的時間，也幫助了對於不會修圖的我（尷尬而不失禮貌的微笑），可是越是酷炫的姿式越是沒有多少瀏覽器欣賞，因此對於要兼容各大主流瀏覽器的童鞋們就觀望一下就好。

書寫格式

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
[注]：若是想要同時實現多個效果，每一個效果之間加空格隔開。

none	默認值，無效果
blur(px)	給元素設置高斯模糊。 單位是像素值，不接受百分比值，若是沒有設定值，則默認是0，無模糊效果；值越大越模糊
brightness(%)	給元素應用一種線性乘法，使其看起來更亮或更暗。 單位是百分比值，若是沒有設定值，默認是1(100%)，無效果；若是值是0%，圖像會全黑；其餘的值對應線性乘數效果，超過100%圖像會比原圖更亮。
contrast(%)	調整圖像的對比度。 單位是百分比值，若是沒有設定值，默認是1(100%)，無效果；若是值是0%，圖像會全黑；超過100%圖像運用更低的對比。
drop-shadow(h-shadow v-shadow blur spread color)	給圖像設置陰影效果。 <h-shadow> (必須)：設置陰影偏移量。 設定水平方向距離， 負值會使陰影出如今元素左邊。  <v-shadow>(必須)：設置陰影偏移量。設定垂直距離，負值會使陰影出如今元素上方。 <blur-radius> (可選)：設置陰影模糊值。 值越大，越模糊，則陰影會變得更大更淡。不容許負值，若未設定，默認是0 (則陰影的邊界很銳利)。 <spread-radius> (可選)：設置陰影範圍。正值會使陰影擴張和變大，負值會是陰影縮小。若未設定，默認是0 (陰影會與元素同樣大小)。 [注]：Webkit, 以及一些其餘瀏覽器 不支持第四個長度，若是加了也不會渲染。  <color> (可選)：設置陰影顏色。若未設定，顏色值基於瀏覽器。若是顏色值省略，WebKit中陰影是透明的。
grayscale(%)	將圖像轉換爲灰度圖像。 值定義轉換的比例。若是沒有設定值，默認是0，無效果；值爲100%則徹底轉爲灰度圖像。值在0%到100%之間，則是效果的線性乘子。
hue-rotate(deg)	給圖像應用色相旋轉。 單位是色環角度值。若是沒有設定值，默認是0deg，無效果。該值雖然沒有最大值，超過360deg的值至關於又繞一圈。
invert(%)	反轉輸入圖像。 值定義轉換的比例。若是沒有設定值，默認是0，無效果。值爲100%則是徹底反轉。值在0%和100%之間，則是效果的線性乘子。
opacity(%)	轉化圖像的透明程度。 值定義轉換的比例。若是沒有設定值，默認是1，無效果。值爲0%則是徹底透明。值在0%和100%之間，則是效果的線性乘子。 該函數與已有的opacity屬性很類似，不一樣之處在於經過filter，一些瀏覽器爲了提高性能會提供硬件加速。
saturate(%)	轉換圖像飽和度。 值定義轉換的比例。若是沒有設定值，默認是1，無效果。值爲0%則是徹底不飽和。其餘值，則是效果的線性乘子。超過100%圖像有更高的飽和度。
sepia(%)	將圖像轉換爲深褐色。 值定義轉換的比例。若是沒有設定值，默認是0，無效果。值爲100%則是深褐色的。值在0%和100%之間，則是效果的線性乘子。
url()	URL函數接受一個XML文件，該文件設置了 一個SVG濾鏡，且能夠包含一個錨點來指定一個具體的濾鏡元素。 例如：filter: url(svg-url#element-id)

舉個栗子

一、filter:none;

二、filter:blur(10px);

三、filter:brightness(200%);

四、filter: contrast(200%);

五、filter:drop-shadow(10px 10px 10px #ccc);

六、filter:grayscale(50%) hue-rotate(30deg) invert(30%) opacity(50%) saturate(200%) sepia(50%);

 

 七、對於url(blur.svg#blur)來講，結合SVG濾鏡使用，可克服部分瀏覽器兼容問題，而且更能實現多樣化，真正實現網頁上的PS，最近正在補充學習SVG（使用 XML 來描述二維圖形和繪圖程序的語言），稍後整理分享