filter in CSS

CSS3 中 Filter的应用

Filter是CSS3中对图片添加特效的方法，可以认为是一种滤镜

基本语法是：

filter: <filter-function> [<filter-function>]* | none


/* examples */
.mydiv { filter: grayscale(50%) }

img {
  filter: grayscale(0.5) blur(10px);
}

主要有以下10种功能：

• blur: 虚化

filter: blur(2px);

• brightness: 亮度

filter: brightness(0.4);

• contrast： 对比度

filter: contrast(200%);

• grayscale： 灰度

filter: grayscale(80%);

• opacity: 透明度

filter: opacity(60%);

• saturate: 饱和度

filter: saturate(70%);

• invert: 反色

filter: invert(85%);

• sepia: 褐色

filter: sepia(30%);

• hue-rotate: 色相旋转

filter: hue-rotate(90deg);

• drop-shadow: 添加阴影

/* h-shadow v-shadow blur color */
filter: drop-shadow(4px 4px 8px blue);