兼容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用法介绍一章节。

兼容IE8和IE7浏览器的圆形图案

回复

我来回复
  • 暂无回复内容