站長資訊網(wǎng)
CSS3支持多種濾鏡。CSS3中可利用filter屬性來給元素添加濾鏡效果，該屬性內(nèi)置多種濾鏡函數(shù)：blur()設(shè)置模糊濾鏡、brightness()設(shè)置亮度濾鏡、contrast()設(shè)置對比度濾鏡、grayscale()設(shè)置灰度濾鏡等。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css3支持很多種濾鏡，通過css3濾鏡filter屬性，我們可以制作出類似photoshop的濾鏡效果。例如為圖片制作模糊效果，陰影效果，濾色效果等。
| Filter | 描述 |
|---|---|
| blur(px) | 給圖像設(shè)置高斯模糊。"radius"一值設(shè)定高斯函數(shù)的標(biāo)準(zhǔn)差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；
如果沒有設(shè)定值，則默認(rèn)是0；這個參數(shù)可設(shè)置css長度值，但不接受百分比值。 |
| brightness(%) | 給圖片應(yīng)用一種線性乘法，使其看起來更亮或更暗。如果值是0%，圖像會全黑。值是100%，則圖像無變化。其他的值對應(yīng)線性乘數(shù)效果。值超過100%也是可以的，圖像會比原來更亮。如果沒有設(shè)定值，默認(rèn)是1。 |
| contrast(%) | 調(diào)整圖像的對比度。值是0%的話，圖像會全黑。值是100%，圖像不變。值可以超過100%，意味著會運(yùn)用更低的對比。若沒有設(shè)置值，默認(rèn)是1。 |
| drop-shadow(h-shadow v-shadow blur spread color) |
給圖像設(shè)置一個陰影效果。陰影是合成在圖像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。 函數(shù)接受<shadow>(在CSS3背景中定義)類型的值，除了"inset"關(guān)鍵字是不允許的。該函數(shù)與已有的box-shadow box-shadow屬性很相似；不同之處在于，通過濾鏡，一些瀏覽器為了更好的性能會提供硬件加速。
|
| grayscale(%) |
將圖像轉(zhuǎn)換為灰度圖像。值定義轉(zhuǎn)換的比例。值為100%則完全轉(zhuǎn)為灰度圖像，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設(shè)置，值默認(rèn)是0； |
| hue-rotate(deg) |
給圖像應(yīng)用色相旋轉(zhuǎn)。"angle"一值設(shè)定圖像會被調(diào)整的色環(huán)角度值。值為0deg，則圖像無變化。若值未設(shè)置，默認(rèn)值是0deg。該值雖然沒有最大值，超過360deg的值相當(dāng)于又繞一圈。 |
| invert(%) |
反轉(zhuǎn)輸入圖像。值定義轉(zhuǎn)換的比例。100%的價值是完全反轉(zhuǎn)。值為0%則圖像無變化。值在0%和100%之間，則是效果的線性乘子。 若值未設(shè)置，值默認(rèn)是0。 |
| opacity(%) |
轉(zhuǎn)化圖像的透明程度。值定義轉(zhuǎn)換的比例。值為0%則是完全透明，值為100%則圖像無變化。值在0%和100%之間，則是效果的線性乘子，也相當(dāng)于圖像樣本乘以數(shù)量。 若值未設(shè)置，值默認(rèn)是1。該函數(shù)與已有的opacity屬性很相似，不同之處在于通過filter，一些瀏覽器為了提升性能會提供硬件加速。 |
| saturate(%) |
轉(zhuǎn)換圖像飽和度。值定義轉(zhuǎn)換的比例。值為0%則是完全不飽和，值為100%則圖像無變化。其他值，則是效果的線性乘子。超過100%的值是允許的，則有更高的飽和度。 若值未設(shè)置，值默認(rèn)是1。 |
| sepia(%) |
將圖像轉(zhuǎn)換為深褐色。值定義轉(zhuǎn)換的比例。值為100%則完全是深褐色的，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設(shè)置，值默認(rèn)是0； |
| url() |
URL函數(shù)接受一個XML文件，該文件設(shè)置了 一個SVG濾鏡，且可以包含一個錨點(diǎn)來指定一個具體的濾鏡元素。 例如： filter: url(svg-url#element-id) |
用法示例
/* 使用SVG filter */ filter: url("filters.svg#filter-id"); /* 使用filter函數(shù) */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%); /* 多個filter */ filter: contrast(175%) brightness(3%); /* 不使用filter */ filter: none; /* 全局變量 */ filter: inherit; filter: initial; filter: unset;
（學(xué)習(xí)視頻分享：css視頻教程）
