css_attribute

border-radius

by Mai zhikun

HTML

<img src='http://hm.baidu.com/hm.gif' class="img_radius" />
<img src='http://hm.baidu.com/hm.gif' class="img_radius radius_tl" />
<img src='http://hm.baidu.com/hm.gif' class="img_radius radius_br" />
<img src='http://hm.baidu.com/hm.gif' class="img_radius radius_tl_br" />

CSS

.radius_tl { border-top-left-radius: 100%;  }
.radius_br { border-bottom-right-radius: 100%;  }
.radius_tl_br { 
    border-top-left-radius: 100%;  
    border-bottom-right-radius: 100%;
}
.img_radius {
     width: 100px;
    height: 100px;
    background-size: cover;
    background-image: url(http://publish.404mzk.com/image/superman_6.jpeg);
}

JavaScript

var num = 0
setInterval(function() {
    $('.j_radius').css('border-top-left-radius',(num++)+'%')
    $('.j_radius').css('border-top-right-radius',(num++)+'%')
}, 100);
//