码迷,mamicode.com
首页 > Web开发 > 详细

用css在IE7、8上实现圆角

时间:2016-08-03 13:36:41      阅读:544      评论:0      收藏:0      [点我收藏+]

标签:

 一、前段时间做了一个有网页里面有圆角的效果,使用的是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样式如下:

技术分享

技术分享

技术分享

 

用css在IE7、8上实现圆角

标签:

原文地址:http://www.cnblogs.com/evolutionY/p/5732324.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!