css3中的滤镜特效

页面被渲染后再页面中某个局部呈现的一些特殊的视觉效果。
先放一张原图：

1. grayscale滤镜（灰度滤镜）

<style>
    .grayscale {
        filter: grayscale(50%);
        -webkit-filter: grayscale(50%);
    }
</style>
<h3>grayscale（灰度滤镜）：</h3>
<div class="grayscale"></div>

2. sepia滤镜（棕色调）

<style>
    .sepia {
        filter: sepia(50%);
        -webkit-filter: sepia(50%);
    }
</style>
<h3>sepia（棕色调）:</h3>
<div class="sepia"></div>

3.hue-rotate:非常特殊的一个滤镜，将颜色光谱想象成一个由红色到紫色的圆，该滤镜是将图片的颜色沿光环旋转一个角度。

<style>
    .hue-rotate{
        filter: hue-rotate(90deg);
        -webkit-filter:hue-rotate(90deg);
    }
</style>
<h3>hue-rotate:</h3>
<div class="hue-rotate"></div>

4. saturate(饱和度滤镜)

<style>
    .saturate{
        filter: saturate(50%);
        -webkit-filter:saturate(50%);
    }
</style>
<h3>saturate(饱和度滤镜):</h3>
<div class="saturate"></div>

5. invert（颜色翻转滤镜）

<style>
    .invert{
        filter: invert(50%);
        -webkit-filter:invert(10%);
    }
</style>
<h3>invert（颜色翻转滤镜）:</h3>
<div class="invert"></div>

6. opacity（透明度滤镜）

<style>
    .opacity{
        filter: opacity(50%);
        -webkit-filter:opacity(50%);
    }
</style>
<h3>opacity（透明度滤镜）:</h3>
<div class="opacity"></div>

7.contrast（对比的滤镜）

<style>
    .contrast{
        filter: contrast(50%);
        -webkit-filter:contrast(50%);
    }
</style>
 <h3>contrast（对比的滤镜）:</h3>
 <div class="contrast"></div>

8.blur（模糊滤镜）

<style>
    .blur{
        filter: blur(5px);
        -webkit-filter:blur(5px);
    }

</style>
 <h3>blur（模糊滤镜）：</h3>
 <div class="blur"></div>

9.drop-shadow（阴影滤镜）

<style>

    .drop-shadow{
        filter: drop-shadow(4px -4px 6px purple);
        -webkit-filter:drop-shadow(4px -4px 6px purple);
    }
</style>

 <h3>drop-shadow（阴影滤镜）:</h3>
 <div class="drop-shadow"></div>