之前在看七月老師的視頻的時候，看到了有一個樣式是 -webkit-filter ，不知道是什么（我沒咋學過CSS，嘿嘿，所以不知道是啥），于是查了一下，原來是濾鏡吖。但是在微信小程序里使用的時候，下面一直飄紅線，再仔細查了一下，原來是在 Chrome, Safari 中使用 -webkit-filter ，還有 -moz-filter （適配Firefox）， -o-filter （適配Opera）， -ms-filter （適配ie）而微信小程序里使用的話，使用 filter 就可以了。一時間好奇了下，就多試了幾個函數，以下是詳細的筆記

定義

filter 屬性定義了元素(通常是)的可視效果(例如：模糊與飽和度)。

分類

使用

提示:濾鏡通常使用百分比 (如：75%), 當然也可以使用小數來表示 (如：0.75)。

blur

高斯模糊：blur(radius),給圖像設置高斯模糊。"radius"一值設定高斯函數的標準差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； 如果沒有設定值，則默認是0；這個參數可設置css長度值，但不接受百分比值。

filter: blur(18px);

brightness

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

filter: brightness(70%);

contrast

對比度：調整圖像的對比度。值是0%的話，圖像會全黑。值是100%，圖像不變。值可以超過100%，意味著會運用更低的對比。若沒有設置值，默認是1。

filter: contrast(50%);

drop-shadow

給圖像設置一個陰影效果。陰影是合成在圖像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。 函數接受 (在CSS3背景中定義)類型的值，除了"inset"關鍵字是不允許的。該函數與已有的box-shadow box-shadow屬性很相似；不同之處在于，通過濾鏡，一些瀏覽器為了更好的性能會提供硬件加速。 參數如下：

(必須) 這是設置陰影偏移量的兩個 值. 設定水平方向距離. 負值會使陰影出現在元素左邊. 設定垂直距離.負值會使陰影出現在元素上方。查看可能的單位. 如果兩個值都是0, 則陰影出現在元素正后面 (如果設置了 and/or ，會有模糊效果). (可選) 這是第三個code>值. 值越大，越模糊，則陰影會變得更大更淡.不允許負值 若未設定，默認是0 (則陰影的邊界很銳利). (可選) 這是第四個 值. 正值會使陰影擴張和變大，負值會是陰影縮小.若未設定，默認是0 (陰影會與元素一樣大小). 注意: Webkit, 以及一些其他瀏覽器 不支持第四個長度，如果加了也不會渲染。