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圆角图片时,需要注意浏览器的兼容性问题,选择合适的方式才能使圆角图片在不同浏览器中都正常显示。