[1]語法 [2]灰度 [3]飽和度 [4]褐色 [5]色相 [6]反色 [7]透明度 [8]亮度 [9]對比度 [10]模糊 [11]陰影 ...
前面的話
CSS濾鏡filter用於模糊、銳化、元素變色等操作， 通常適用於圖片、背景等。本文將詳細介紹CSS濾鏡filter
語法
filter
初始值: none
應用於: 所有元素
繼承性: 無
值: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()
相容性: IE瀏覽器及android4.3-瀏覽器不支持，android4.4+需要添加-webkit-首碼
[註意]使用空格分隔多個濾鏡。濾鏡通常使用百分比(如：75%)，也可以使用小數來表示(如：0.75)
灰度
grayscale
通過使用灰度grayscale，會把圖片變成灰色。值為100%則完全轉為灰度圖像，值為0%圖像無變化，預設是0
飽和度
saturate
值為0%則是完全不飽和，值為100%則圖像無變化。超過100%的值是允許的，表示更高的飽和度。若值未設置，值預設是1
褐色
sepia
使用sepia將圖像轉換為深褐色。值為100%完全是深褐色的，值為0%圖像無變化。若未設置，值預設是0
色相
hue-rotate
通過hue-rotate給圖像應用色相旋轉。"angle"一值設定圖像會被調整的色環角度值。值為0deg，則圖像無變化。若值未設置，預設值是0deg。該值雖然沒有最大值，但超過360deg的值相當於又繞一圈
反色
invert
通過invert反轉輸入圖像。100%表示完全反轉，值為0%則圖像無變化。若值未設置，值預設是0
透明度
opacity
通過opacity表示圖像的透明程度。值為0%則是完全透明，值為100%則圖像無變化。若值未設置，值預設是1。該函數與已有的opacity屬性很相似，不同之處在於通過filter，一些瀏覽器為了提升性能會提供硬體加速
亮度
brightness
通過調整亮度brightness使其看起來更亮或更暗。如果值是0%，圖像會全黑。值是100%，則圖像無變化。值超過100%也是可以的，圖像會比原來更亮。如果沒有設定值，預設是1
對比度
contrast
圖像的對比度contrast，值是0%的話，圖像會全灰。值是100%，圖像不變。值可以超過100%，意味著會運用更低的對比度。若沒有設置值，預設是1
模糊
blur
通過blur給圖像設置高斯模糊。"radius"一值設定高斯函數的標準差，或者是屏幕上以多少像素融在一起，所以值越大越模糊。如果沒有設定值，則預設是0；這個參數可設置css長度值，但不接受百分比值
陰影
drop-shadow
drop-shadow(h-shadow v-shadow blur spread color)用來給圖像設置一個陰影效果。陰影是合成在圖像下麵，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。函數接受<shadow>(在CSS3背景中定義)類型的值，除了"inset"關鍵字是不允許的。該函數與已有的box-shadow屬性很相似；不同之處在於，通過濾鏡，一些瀏覽器為了更好的性能會提供硬體加速
<shadow>參數如下：
<offset-x><offset-y>(必須) 這是設置陰影偏移量的兩個<length>值。<offset-x>設定水平方向距離，<offset-y>設定垂直距離。如果兩個值都是0，則陰影出現在元素正後面
<blur-radius>(可選) 這是第三個<length>值。值越大，越模糊，則陰影會變得更大更淡。不允許負值。若未設定，預設是0(則陰影的邊界很銳利)
<spread-radius>(可選) 這是第四個<length>值。正值會使陰影擴張和變大，負值會使陰影縮小。若未設定，預設是0(陰影會與元素一樣大小)
<color>(可選) 查看<color>該值可能的關鍵字和標記。若未設定，顏色值會應用color屬性的值。另外，如果顏色值省略，WebKit中陰影是透明的雖然drop-shadow不支持內陰影，但它可以實現不規則圖像的陰影，而box-shadow則無法實現
[註意]關於盒子陰影的詳細信息移步至此
<style>
body{background-color: gray;}
.box{width: 260px;margin: 20px; padding: 20px;background-color: #fff;position: relative;font-size: 24px;line-height: 40px;}
.cor{position: absolute;left: -29px; top:27px;border: 15px solid transparent;border-right-color: #fff;}
.box-shadow{box-shadow: 5px 5px 10px black;}
.drop-shadow{filter: drop-shadow(5px 5px 10px black);}
</style>
<div class="box box-shadow">
<i class="cor"></i>
box-shadow
</div>
<div class="box drop-shadow">
<i class="cor"></i>
filter: drop-shadow
</div>
