兼容IE8和IE7浏览器的圆形图案
分类:实例代码
在IE9和IE9以上浏览器还有其他标准浏览器中,实现圆角非常轻松。
具体可以参阅CSS3 border-radius圆角一章节。
但是IE8和IE7的用户依然比较庞大,所以在某些时候做一下兼容还是有必要的。
下面就分享一下如何使用纯css来实现兼容效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> .box { width:200px; height:200px; overflow:hidden; background:green; } .antzone { width:100%; height:100%; border-radius:50%; border:200px dotted; border-width: 0vw; background-color:red; } </style> </head> <body> <div class="box"> <div class="antzone"></div> </div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
.box { width:200px; height:200px; overflow:hidden; background:green; }
设置圆形元素的容器的相关样式。
宽高分别为200px;overflow:hidden的目的是将超出的内容部分隐藏;背景色为绿色,为了便于观察。
.antzone { width:100%; height:100%; border-radius:50%; border:200px dotted; border-width: 0vw; background-color:red; }
上面的代码是实现圆形效果的核心。
宽高分别为100%,也就是父元素的尺寸。
border-radius:50%可以实现在标准浏览器中的圆角效果。
border:200px dotted设置边框的尺寸为200px,边框类型为dotted,在其他标准浏览器中显示为方块,但是在IE7和IE8中显示为圆形。父元素的overflow:hidden功能也得以体现,子元素的width部分会被隐藏,只显示边框部分。
border-width: 0vw使用vw作为单位的目的是通过浏览器兼容性来区分浏览器的效果,只有IE9也IE9以上和其他标准浏览器支持,IE8和IE7不支持,所以在非IE8和IE7中,边框为0。
二.相关阅读:
(1).border-radius可以参阅CSS3 border-radius一章节。
(2).vw可以参阅css vw用法介绍一章节。