css样式：filter的各种属性

<view class="filter">
    <view>filter</view>
    <image src="../../../images/call.png" style="width: 120rpx;height: 120rpx;" mode="" />
  </view>

.filter {
  margin: 50rpx;
  width: 200rpx;
  height: 160rpx;
  background-color: #fff;
}

（原图）

1、 blur()：给元素添加高斯模糊效果，模糊程度由 参数指定。

filter: blur(4rpx);

2、brightness()：调整元素的亮度， 参数设置亮度的百分比。

filter: blur(4rpx);

3、contrast()：调整元素的对比度， 参数设置对比度的百分比。

filter: contrast(50%);

4、grayscale()：将元素转为灰度图像， 参数设置灰度的百分比。

filter: grayscale(50%);

5、hue-rotate()：通过旋转色调的方式改变元素的颜色， 参数表示旋转的角度。0/360deg为原图色。

filter: hue-rotate(280deg);

6、 invert()：反转元素的颜色， 参数设置反转的百分比。

filter: invert(42%);

7、opacity()：调整元素的透明度， 参数设置透明度的百分比。

filter: opacity(40%);

8、saturate()：调整元素的饱和度， 参数设置饱和度的百分比。

 filter: saturate(40%);

9、sepia()：将元素转为深褐色， 参数设置深褐色的百分比。

filter: sepia(80%);

10、drop-shadow( )：在元素周围创建一个阴影，参数分别是阴影的水平偏移量、垂直偏移量、模糊半径和颜色。

filter: drop-shadow(0px 0px 5px rgb(247, 20, 31));

若是元素没有设置背景色，则会在元素内部子元素的周围生成阴影。