相容低版本IE瀏覽器的背景顏色漸變效果

antzone發表於2017-03-08
瀏覽器

大多數的相容性問題都是由於低版本的IE瀏覽器所導致的，本章節分享一段程式碼例項，它能夠實現背景的顏色的漸變效果，如果在標準瀏覽器中直接採用css3屬性即可實現，但是IE低版本的問題所以需要進行一下相容性處理。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.gradient{
  background:#000000;
  background:-moz-linear-gradient(top, #000000 0%, #ffffff 100%);
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff));
  background:-webkit-linear-gradient(top, #000000 0%, #ffffff 100%);
  background:-o-linear-gradient(top, #000000 0%, #ffffff 100%);
  background:-ms-linear-gradient(top, #000000 0%, #ffffff 100%);
  background:linear-gradient(to bottom, #000000 0%, #ffffff 100%);
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000',endColorstr='#ffffff',GradientType=0);
  width:300px;
  height:100px;
  margin:0px auto;
}
:root .gradient{filter:none;}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>

標準瀏覽器使用的linear-gradient屬性，而低版本的IE瀏覽器則是使用的濾鏡效果。

相關文章