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

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

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

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

 

circle-bg

效果图如下:

chrome下圆角图片ie6下圆角图片

相关代码如下:

css

.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%;}

html

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

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

评论功能已关闭。