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*/

}

巴特西