css3 十大濾鏡功能

1、模糊濾鏡（px）

給影象設定高斯模糊。值越大越模糊，預設是0，就是不模糊。

filter:

blur
(4px)
;

給應用一種線性乘法，使其看起來更亮或更暗。如果值是0%，影象會全黑。值是100%，則影象無變化。其他的值對應線性乘數效果。值超過100%也是可以的，影象會比原來更亮。如果沒有設定值，預設是1。

filter:

brightness
(200%)
;

調整影象的對比度。值是0%的話，影象會全黑。值是100%，影象不變。值可以超過100%，意味著會運用更低的對比。若沒有設定值，預設是1。

filter:

contrast
(200%)
;

與 box-shadow屬性很相似；不同之處在於，通過濾鏡，一些瀏覽器為了更好的效能會提供硬體加速。

filter: drop-

shadow
(8px 8px 10px red)
;

將影象轉換為灰度影象。值定義轉換的比例。值為100%則完全轉為灰度影象，值為0%影象無變化。若未設定，值預設是0。也可以寫0-1之間的小數。

filter:

grayscale
(0.5
);

給影象應用色相旋轉。讓影象中的顏色，在色相環中做對應的旋轉。值為0deg，則影象無變化。若值未設定，預設值是0deg。該值雖然沒有最大值，超過360deg的值相當於又繞一圈。

filter: hue-

rotate
(90deg)
;

反轉輸入影象。值定義轉換的比例。100%的價值是完全反轉。值為0%則影象無變化。值在0%和100%之間，則是效果的線性乘子。 若值未設定，值預設是0。

filter:

invert
(100%)
;

影象的透明程度。值為0%則是完全透明，值為100%則影象無變化。0-100%之間則是部分透明。也可以用0-1之間的小數替代%。

與已有的opacity屬性很相似，不同之處在於通過filter，一些瀏覽器為了提公升效能會提供硬體加速。

filter:

opacity(30
%);

值為0%則是完全不飽和，值為100%則影象無變化。大於100%，則飽和度增高，色彩就會變重。

filter:

saturate
(800%)
;

將影象轉換為深褐色。值為100%則完全是深褐色的，值為0%影象無變化。值在0%到100%之間，則是效果的線性乘子。若未設定，值預設是0。

filter:

sepia
(100%)
;

總結css3的十大濾鏡

1 模糊濾鏡 px 給影象設定高斯模糊。值越大越模糊，預設是0，就是不模糊。filter blur 4px 2 亮度 給應用一種線性乘法，使其看起來更亮或更暗。如果值是0 影象會全黑。值是100 則影象無變化。其他的值對應線性乘數效果。值超過100 也是可以的，影象會比原來更亮。如果沒有設定值，預設...

遇見CSS3濾鏡

譯自 jeffrey way於2011年12月22日 教程詳細內容 主題 css濾鏡 可用性 webkit每晚構建的版本 酷炫程度 100 演示 本月初公布了乙個新的規範 濾鏡效果1.0。它提出了一些令人興奮的新特性，我們可以使用它在瀏覽器中來建立photoshop般的效果。更妙的是，webkit已...

css3 濾鏡效果

色相旋轉 曾經和photoshop色相 飽和度面板打過交道嗎？現在好了，你可以在瀏覽器中應用它。img 如果對這個度數值如何設定感到困惑，可以試想一下乙個色輪。您指定的度數值決定了該輪停止之處。這意味著 0deg將不會有任何效果，而50deg會相應的轉動撥盤。在這種情況下，nettuts 的標誌將採...