css3属性之filter初探

filter属性是css不常用的一个属性，但是用好了可以给网页增色不少！ps： IE不支持此属性；

img {
　　-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
　　filter: grayscale(100%);
}

　　这段代码可以让图片编程黑白，grayscale： 灰度，灰度模式；

　　

img {
    -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
    filter: brightness(200%);
}

　　这段代码可以让图片亮度变亮， 配合css的渐变transition属性可以实现滑过逐渐变亮的动画效果。brightness 是bright的名词形式；意为亮度！

img {
    -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
    filter: contrast(200%);
}

　　这段代码可以让图片对比度提高;contrast ： 意为对比，反差

盒子的阴影效果可以用box-shadow实现 ；文字的阴影效果可以用text-shadow实现；那图片的呢？给图片增加如下属性可以使得图片出现阴影效果；

img {
    -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px red);
}

　　常用的filter属性opacity可以改变图片的透明度

img {
    -webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
    filter: opacity(30%); /*百分号或者小数.3*/
}