ie6不支持图片圆角的解决方案

css3可以使用border-radius轻易的对任何元素使用圆角。

但css2如何解决呢？倘若需求需要我们页面的图片都实现圆角，并且需要兼容ie6等低版本浏览器，那么又如何来实现呢？

我们想到用一张中间透明（如下图）覆盖在图片上，而对于不支持png的ie6，我们可以单独对ie6使用gif格式的背景，不过缺点是有那么点锯齿，但无关大雅。如果你非要使用png，也可以使用相关的js使png在ie6下透明化。

效果图如下：

相关代码如下：

<style>
.box{position:relative;width:120px;height:120px;}
.circle{position:absolute;left:0;top:0;width:100%;height:100%;background:url(circle.png);_background:url(circle.gif);}
.img{border-radius:50%;}
</style>

<div class="box">
    <img src="demo.jpg" class="img"/>
    <b class="circle"></b>
</div>

这里为何要加border-radius:50%呢？虽然使用了背景覆盖，但为了防止背景图片加载失败时，在高级浏览器也看不到圆角，从而在此利用了css的渐进增强和优雅降级。