CSS3 filter 的10个属性

CSS3 filter 的10个属性

• 模糊：blur

  filter:blur(10px)
  

​ 默认情况下：default：0

• 灰度：garyscale （ 0 ~ 1 ）

  filter:garyscale(1)
  

  默认情况下：default：100%

• 类似于黄棕色效果：sepia

  filter:sepia(1)
  

  默认情况下：default：100%

  ​

• 饱和度：saturate

  filter:saturate(3)
  

  默认情况下：default：100%

• 当前色相旋转：hue-rotate

  filter:hue-rotate(90deg)
  

  默认情况下：default：0deg

• 反色：invert （ 0 ~ 1 ）

  filter:invert(1)
  

  默认情况下：default：100%

• 不透明度：opacity （0 ~ 1）

  filter:opacity(0.2)
  

  默认情况下：default：100%

• 明度：brightness （ 0 ~ 1 ）

  filter:brightness(0.2)
  

  默认情况下：default：100%

• 对比度：contrast

  filter：contrast（2）
  

  默认情况下：default：100%

• 加阴影：drop-shadow

  filter：drop-shadow（10px 10px 2px #aaa）
  

  ①10px 10px （阴影向右向下平移）（如果是负的，则是向左向上平移）

  ②2px （阴影模糊程度）

  ③#aaa （颜色）