淘先锋技术网

首页 1 2 3 4 5 6 7

CSS圆角图片现在在网页设计中非常常见,但是在IE浏览器中却存在着一些兼容性问题。那么,怎样才能使IE浏览器也正常显示圆角图片呢?下面我们就来看看CSS圆角图片兼容IE的实现方法:

1. 使用CSS3的border-radius属性。

img{
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}

使用CSS3的border-radius属性是最简单的方式,但是IE浏览器只有IE9及以上版本才支持此属性。

2. 使用IE滤镜。

img{
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='路径',sizingMethod='scale')   progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

使用IE滤镜是比较常见的方式,但是需要注意的是:IE滤镜只支持PNG格式的透明图片,且IE6、IE7、IE8需要在父级元素上添加背景色才能正常显示圆角图片。

3. 使用JavaScript。

使用JavaScript也是一种可行的方式,但需要引入第三方库DD_roundies.js。

总之,在实现CSS圆角图片时,需要注意浏览器的兼容性问题,选择合适的方式才能使圆角图片在不同浏览器中都正常显示。