css3支援的濾鏡是由filter屬性定義的視覺效果，包括：1、模糊濾鏡，可給影像設定高斯模糊；2、亮度濾鏡；3、對比度濾鏡；4、投影濾鏡；5、灰階濾鏡；6、色相旋轉濾鏡；7、反轉影像濾鏡；8、透明度濾鏡；9、飽和度濾鏡；10、深褐色濾鏡。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css3支援的濾鏡是由filter屬性定義的視覺效果。
filter屬性可設定的函數（視覺效果）
1、模糊濾鏡（px）
給影像設定高斯模糊。值越大越模糊，預設是0，就是不模糊。
filter:blur(4px);
2、亮度濾鏡（%）
給圖片套用一種線性乘法，使其看起來更亮或更暗。如果值是0%，影像會全黑。值是100%，則影像無變化。其他的值對應線性乘數效果。值超過100%也是可以的，影像會比原來更亮。如果沒有設定值，預設是1。
filter: brightness(200%);
3、對比濾鏡（%）
調整影像的對比。數值是0%的話，影像會全黑。值是100%，影像不變。值可以超過100%，代表會運用更低的對比。若沒有設定值，預設是1。
filter: contrast(200%);
4、投影濾鏡(x偏移y偏移模糊範圍顏色)
與box-shadow屬性很相似；不同之處在於，透過濾鏡，有些瀏覽器為了更好的性能會提供硬體加速。
filter: drop-shadow(8px 8px 10px red);
5、灰階濾鏡(%)
將影像轉換為灰階影像。值定義轉換的比例。值為100%則完全轉為灰階影像，數值為0%影像無變化。若未設置，值預設為0。也可以寫成0-1之間的小數。
filter:grayscale(0.5);
6、色相旋轉濾鏡(deg)
給影像套用色相旋轉。讓影像中的顏色，在色相環中做對應的旋轉。值為0deg，則影像無變化。若值未設置，預設值是0deg。該值雖然沒有最大值，超過360deg的值相當於又繞一圈。
filter: hue-rotate(90deg);
7、反轉影像濾鏡(%)
反轉輸入影像。值定義轉換的比例。 100%的價值是完全反轉。值為0%則影像無變化。值在0%和100%之間，則是效果的線性乘子。若值未設置，值預設為0。
filter: invert(100%);
8、透明度濾鏡(%)
影像的透明程度。值為0%則為完全透明，數值為100%則影像無變化。 0-100%之間則是部分透明。也可以用0-1之間的小數來取代%。
與現有的opacity屬性很相似，不同之處在於透過filter，有些瀏覽器為了提升效能會提供硬體加速。
filter: opacity(30%);
9、飽和度濾鏡(%)
值為0%則是完全不飽和，值為100%則影像無變化。大於100%，則飽和度增高，色彩就會變重。
filter: saturate(800%);
10、深褐色濾鏡(%)
將影像轉換為深褐色。值為100%則完全是深褐色的，數值為0%影像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值預設為0。
filter: sepia(100%);
使用程式碼：
&:hover { -webkit-filter: opacity(0.5%); -o-filter: opacity(0.5); -moz-filter: opacity(0.5); -ms-filter: opacity(0.5); filter: opacity(0.5); }
以上是css3支援的濾鏡是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
