CSS3 Fliter的十种特效（二）

一、drop-shadow阴影

给图片加阴影效果，效果如下图所示：

代码：

#gray{
-webkit-filter:drop-shadow(5px 5px 5px green);

}

二、blur模糊

给图片加模糊效果，改变图片清晰度，效果如下图所示：

代码：

#gray{
-webkit-filter:blur(5px);

}

三、contrast对比度

改变图片的对比度，效果如下图所示：

代码：

#gray{
-webkit-filter:contrast(2);

}

四、brightness亮度

改变图片的亮度，效果如下图所示：

代码：

变亮

#gray{
-webkit-filter:brightness(2);

}

变暗

#gray{
-webkit-filter:brightness(0.5);

}

*当brightness的值小于等于0时，图片会变黑。

五、opacity透明度

改变图片的透明度，效果如下图所示：

代码：

#gray{
-webkit-filter:opacity(0.5);

}

CSS3 Fliter的十种特效（二）

原文：http://www.cnblogs.com/angelachin/p/5743756.html