十大濾鏡效果，在懸浮圖片、切換二維碼模糊不用的圖片等上使用還是很不錯的。 原圖  ## 一、grayscale（灰度模式 0~1） ~~~ img {-webkit-filter: grayscale(1);} ~~~ 上面樣式效果：  ## 三二、sepia（褐色模式 0~1） ~~~ img {-webkit-filter: sepia(0.5);} ~~~ 上面樣式效果：  ## 3、saturate（飽和度 0~1） ~~~ img {-webkit-filter: saturate(0.5);} ~~~ 上面樣式效果：  ## 四、hue-rotate（色相旋轉 0~360deg） ~~~ img {-webkit-filter: hue-rotate(90deg);} ~~~ 上面樣式效果：  ## 五、invert（反色 0~1） ~~~ img {-webkit-filter: invert(0.4);} ~~~ 上面樣式效果：  ## 六、opacity（透明度 0~1） ~~~ img {-webkit-filter: opacity(0.4);} ~~~ 上面樣式效果：  ## 七、brightness（亮度） ~~~ img {-webkit-filter: brightness(0.5);} ~~~ 上面樣式效果：  ## 八、contrast（對比度 0~） ~~~ img {-webkit-filter: contrast(2);} ~~~ 上面樣式效果：  ## 九、blur（模糊度 0~） ~~~ img {-webkit-filter: blur(1px);} ~~~ 上面樣式效果：  ## 十、drop-shadow（陰影效果） ~~~ img {-webkit-filter: drop-shadow(5px 5px 5px #ccc);} ~~~ 上面樣式效果：