-webkit-filter

该属性是我们这次实现该功能的主要属性

目前该属性还属于草案阶段，只有chrome 18+、Safari 浏览器支持，不过相信随着时间的推移，很快会被大规模应用的。

具体的filter用法我会另外写一篇文章和大家分享的，这里主要介绍它的 blur()、brightness()、contrast() 3个属性。

blur()

用来设置相应的dom的模糊程度，用法很简单

filter: blur(5px)

brightness()

用来设置相应dom的明度，对应的值越大越亮

filter: brightness(0.5)

contrast()

对比度值越大越强烈

filter: contrast(200%)

---

clip: rect(205px 572px 516px 351px);

用来裁减DOM，相当于遮罩的概念，由于css模糊会造成边缘变得很淡，影响我们的效果，所以我们用裁减将其边缘部分减去，这样看起来效果就很好了。

clip: rect(205px 572px 516px 351px); ###实例 html：

css：

.ios7 {
         width: 700px;      height: 525px;     overflow: hidden;      position: relative;      margin: 0 auto; }.ios7_f, .ios7_b {
        position: absolute;      top: 0;      left: 0;}.ios7_f img, .ios7_b img{
         width:700px;     height:525px; }.ios7_b {
        -webkit-filter: blur(8px) contrast(0.4) brightness(1.4);     clip: rect(205px 572px 516px 351px);     z-index: 50;    transition: all 0.5s ease-in-out;    }.ios7_b_on {
        clip: rect(516px 572px 516px 351px); }.ios7_i {
        position: absolute;     clip: rect(205px 572px 516px 351px); }.ios7_i img {
        z-index: 100;     width: 222px;        height:301px;      top: 215px;     left: 350px;     position: absolute;     transition: all 0.5s ease-in-out; }.ios7_i_on img {
        top: 516px }

js：

var img = document.querySelector('.ios7_i');var back = document.querySelector('.ios7_b');document.onkeydown = function(e) {    if (e.keyCode == '38') {        img.className = 'ios7_i';        back.className = 'ios7_b';        return false;    } else if (e.keyCode == '40') {        img.className += ' ios7_i_on';        back.className += ' ios7_b_on';        return false;   }};

demo：

转自：