用css在IE7、8上实现圆角
一、前段时间做了一个有网页里面有圆角的效果,使用的是border-radius:50%,但是检测兼容时发现在IE7/8等远古版本不支持border-radius的百分比显示,无奈只能用图片替换了。
但是作为一个前端,能用css解决的图片,都应该用css解决
二、使用css兼容IE7/8实现圆角效果
因为border-radius在IE7/8不支持百分比显示,所以我们只能使用另外一种方法了,利用border-style中的dotted,做出像是border-radius:50%的效果:
并且也在样式中添加 border-radius:50%,这样也可以兼容IE9及以上浏览器;
html代码:
css样式如下: