CSS3中強大的filter(濾鏡)屬性

在做video相機濾鏡的時候肿仑，發(fā)現(xiàn)css3中很強大的濾鏡屬性努溃，下面將貼代碼展示：

效果圖

代碼展示：

<!DOCTYPE html>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <html lang="zh-CN"><head>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <title>濾鏡頁面</title></head>? ? ? ? ? ? ? ? ? ? ? ? ? ?

<style>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

img{width:33%;height:auto;float:left;}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

.blur{-webkit-filter:blur(4px);filter:blur(4px);}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?/* 改變圖片的清晰度默認值：0（值為length ）*/? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

.brightness{-webkit-filter:brightness(0.30);filter:brightness(0.30);}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??/* 改變圖片的亮度默認值：100％（值為0-1之間的小數(shù)）*/?? ? ? ? ? ? ? ? ? ? ? ??

.contrast{-webkit-filter:contrast(180%);filter:contrast(180%);}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??/* 改變圖片的對比度默認值：100％（值為num）*/? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

.grayscale{-webkit-filter:grayscale(100%);filter:grayscale(100%);}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?/* 把圖片變成灰度默認值：100％乖坠，如果grayscale()中沒有任何參數(shù)值抖单，將會以“100%”渲染（值為0-1之間的小數(shù)）*/? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

.huerotate{-webkit-filter:hue-rotate(180deg);filter:hue-rotate(180deg);}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??/* 改變圖片的色相默認值：0deg（值為angle）*/? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

?.invert{-webkit-filter:invert(100%);filter:invert(100%);}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??/* 做出來的效果是我們照相機底面的效果一樣默認值：100％（值為0-1之間的小數(shù)）*/? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

.opacity{-webkit-filter:opacity(50%);filter:opacity(50%);}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?/* 改變圖片的透明度默認值：100％（值為0-1之間的小數(shù)）*/? ? ? ? ? ? ? ? ? ? ?

.saturate{-webkit-filter:saturate(7);filter:saturate(7);}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?/* 改變圖片的飽和度默認值：100％讳窟，將其值變大到300%：-webkit-filter:saturate(3); （值為num） */

.sepia{-webkit-filter:sepia(100%);filter:sepia(100%);}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??? ? ? ? ? /* 把圖片變成褐色默認值：100％，如果sepia()中沒有任參數(shù)值饲帅，將會以“100％”渲染（值為0-1之間的小數(shù)）*/

.shadow{-webkit-filter:drap-shadow(8px 8px 8px green);filter:drop-shadow(8px 8px 8px green);}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?/* 增加圖片陰影 */? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

</style>

<body>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<p><strong>注意：</strong>Internet Explorer 不支持 filter 屬性复凳。</p>? ? ? ? ? ? ? ? ? ? ? ? ??

<img src="1.png" width="300" height="300">? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <img class="blur" src="1.png" width="300" height="300">? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <img class="brightness" src="1.png" width="300" height="300">? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <img class="contrast" src="1.png" width="300" height="300">? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<img class="grayscale" src="1.png" width="300" height="300">? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<img class="saturate" src="1.png" width="300" height="300">? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<img class="grayscale" src="1.png" width="300" height="300">? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <img class="huerotate" src="1.png" width="300" height="300">? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<img class="invert" src="1.png" width="300" height="300">? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<img class="opacity" src="1.png" width="300" height="300">? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <img class="sepia" src="1.png" width="300" height="300">? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<img class="shadow" src="1.png" width="300" height="300">? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </body>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?</html> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??