CSS3 filter10种特效整理
-webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。一共有10种最基本的特效，下来这个DEMO很好的展示了这些效果：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>css3属性 filter</title> <style> *{padding: 0; margin: 0;} .imgbox{width: 860px;margin: 20px auto; height: 256px;} img{display: block; width: 410px; float: left; } img:last-of-type{float:right;} .box{width: 860px;margin: 0 auto; } input[type="button"]{font-size: 14px;padding: 10px 12px;border:none;} input[type="button"].hover,input[type="button"]:hover{background: #2BA5D3;color: #fff;} .inner{width: 860px;text-align: center;margin: 0 auto;padding: 0 0 20px 0;font-size: 20px;font-family: 'microsoft yahei'} </style> <script> window.onload=function(){ var img=document.querySelectorAll('img')[1]; var btn=document.querySelectorAll('input'); var div=document.querySelector('.inner'); img.style.WebkitFilter='grayscale(0.8)'; div.innerHTML='grayscale：灰度，值为0-1之间小数'; for(var i=0; i<btn.length;i++){ btn[i].onclick=function(){ switch(this.value) { case 'grayscale': img.style.WebkitFilter='grayscale(0.8)'; break; case 'sepia': img.style.WebkitFilter='sepia(0.8)'; break; case 'saturate': img.style.WebkitFilter='saturate(50)'; break; case 'hue-rotate': img.style.WebkitFilter='hue-rotate(90deg)'; break; case 'invert': img.style.WebkitFilter='invert(0.3)'; break; case 'opacity': img.style.WebkitFilter='opacity(0.2)'; break; case 'brightness': img.style.WebkitFilter='brightness(0.8)'; break; case 'contrast': img.style.WebkitFilter='contrast(210)'; break; case 'blur': img.style.WebkitFilter='blur(5px)'; break; case 'drop-shadow': img.style.WebkitFilter='drop-shadow(10px 10px 5px #aaa)'; break; } div.innerHTML=this.value+'：'+this.getAttribute('data-info'); } } } </script> </head> <body> <div class="imgbox" id="imgBox"> <img src="http://img.ivsky.com/img/tupian/pre/201509/08/caoyuanshang_wanxia-005.jpg"> <img src="http://img.ivsky.com/img/tupian/pre/201509/08/caoyuanshang_wanxia-005.jpg"> </div> <div class="inner"></div> <div class="box"> <input type="button" value="grayscale" data-info="灰度，值为0-1之间小数"> <input type="button" value="sepia" data-info="褐色，值为0-1之间小数"> <input type="button" value="saturate" data-info="饱和度，值为num"> <input type="button" value="hue-rotate" data-info="色相，值为0-360之间的色轮数"> <input type="button" value="invert" data-info="反色，值为0-1之间小数"> <input type="button" value="opacity" data-info="不透明度，值为0-1之间小数"> <input type="button" value="brightness" data-info="亮度，值为0-1之间小数"> <input type="button" value="contrast" data-info="对比度，值为num"> <input type="button" value="blur" data-info="模糊，值为length"> <input type="button" value="drop-shadow" data-info="阴影，同box-shadow写法"> </div> </body> </html>
用法是标准的CSS写法，如：-webkit-filter: blur(2px)；关于浏览器的支持，在caniuse.com 里可以看到，除开ie有及Opea min不支持以外，其它浏览器都可以良好的支持；但是需要注意的是，为了避免出现兼容问题，还是应该加上各大浏览器的私有前缀；如-webkit，-moz；上面这个demo，只是兼容了webkit，浏览的时候，需在chrome里面运行；
