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圓角圖片時,需要注意瀏覽器的兼容性問題,選擇合適的方式才能使圓角圖片在不同瀏覽器中都正常顯示。
上一篇css在.jsp中調用
下一篇oracle 連接多張表