A Bit? No!!!

你可能已经注意到我博客上的图片是带有圆角的，以免你没看过，先来张照片看看吧，这似乎真的是我第一次拍照片。

这可是用我们纳税人的血汗钱堆出来的灯火辉煌又毫无实际用途的外滩啊，有这些钱我能买多少MBP，买多少法拉利、兰博基尼啊TAT 看来我也不是什么好东西。。。

然后再来一头黄牛，都是用MOTO Milestone拍的

展示完成依然是讲解简单的实现方法。哈哈，上两张照片我就可以少写点字了。。。

我们首先把需要加圆角的图片绑定一个事件wrapme

var imgs = $('.body img');

imgs.bind('wrapme', function(){
  $(this).wrap(function(){
    return '<span style="background-image:url(' + $(this).attr('src') + '); height: '+ $(this).height() + 'px; width: '+ $(this).width() + 'px;" class="rounded" />';
  });
});

绑定了事件自然就是要触发事件的

var img = new Image();

imgs.each(function(){
  img.src = $(this).attr('src');
  if (img.complete) {
    $(this).trigger('wrapme');
  } else {
    $(this).load(function(){ $(this).trigger('wrapme'); });
  }
});

你可能觉得我这样写太啰嗦，不过简单的$('img').load()是根本无法胜任，因为图片一般只有在第一次访问才会load()，之后你看到的都已经是浏览器的缓存啰

最后是用CSS来给“图片”加上圆角，为什么加个引号呢，因为我们在进行视觉欺骗啊！你已经注意到我们把图片用一个span给包起来了，于是

.rounded {
  display: inline-block;
  -moz-background-size: 100% 100%;
  -moz-border-radius: 7px;
  -moz-box-shadow: 0 2px 5px #777777;
  -webkit-border-radius: 7px;
  -webkit-box-shadow: 0 2px 5px #777777;
  -webkit-background-size: 100% 100%;
  border-radius: 7px;
  box-shadow: 0 2px 5px #777777;
  background-size: 100% 100%;
}
.rounded img {
  opacity: 0;
}

这里面我第一次用到的CSS語法是background-size: 100% 100%，真是个好东西，可以控制背景图片的填充方式

嗯，这所有的一切在IE里都无法工作，我很开心