大家在前端开发中可能只听说过ie支持滤镜，现在好了，webkit内核的浏览器也有了自己的滤镜，以下是一个案例（测试要用最新的chrome哟！），供大家参考：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片墙</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ width: 690px; margin: 20px auto; letter-spacing: -4px; word-spacing: -4px; font-size: 0; } li{ font-size: 16px; letter-spacing: normal; word-spacing: normal; display: inline-block; *display: inline; zoom: 1; list-style: none outside none; margin: 5px; } img{ width: 128px; height: 128px; } .gallery li:nth-child(2){ -webkit-filter: grayscale(0.5); } .gallery li:nth-child(3){ -webkit-filter: sepia(1); } .gallery li:nth-child(4){ -webkit-filter: saturate(0.8); } .gallery li:nth-child(5){ -webkit-filter: hue-rotate(90deg); } .gallery li:nth-child(6){ -webkit-filter: invert(1); } .gallery li:nth-child(7){ -webkit-filter: opacity(0.2); } .gallery li:nth-child(8){ -webkit-filter: blur(3px); } .gallery li:nth-child(9){ -webkit-filter:drop-shadow(5px 5px 5px #ccc); } .gallery li:nth-child(10){ -webkit-filter:saturate(6) hue-rotate(361deg) brightness(0.09); } .gallery:hover li:not(:hover){ -webkit-filter: blur(2px) grayscale(1); opacity: .7; } </style> </head> <body> <ul class="gallery"> <li><img src="1.jpg" /></li> <li><img src="1.jpg" /></li> <li><img src="1.jpg" /></li> <li><img src="1.jpg" /></li> <li><img src="1.jpg" /></li> <li><img src="1.jpg" /></li> <li><img src="1.jpg" /></li> <li><img src="1.jpg" /></li> <li><img src="1.jpg" /></li> <li><img src="1.jpg" /></li> </ul> </body> </html>展示效果：
