相容IE8和IE7瀏覽器的圓形圖案

antzone發表於2017-04-10
瀏覽器

在IE9和IE9以上瀏覽器還有其他標準瀏覽器中，實現圓角非常輕鬆。

具體可以參閱CSS3 border-radius圓角一章節。

但是IE8和IE7的使用者依然比較龐大，所以在某些時候做一下相容還是有必要的。

下面就分享一下如何使用純css來實現相容效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
.box {
  width:200px; 
  height:200px;
  overflow:hidden;
  background:green;
}

設定圓形元素的容器的相關樣式。

寬高分別為200px;overflow:hidden的目的是將超出的內容部分隱藏；背景色為綠色，為了便於觀察。

[CSS] 純文字檢視 複製程式碼
.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用法介紹一章節。

相關文章