CSS實現的相容所有瀏覽器的背景漸變程式碼

admin發表於2017-02-28
CSS瀏覽器
有時候如果讓網頁背景實現漸變效果，那麼可能更為美觀一些，下面就是一段能夠實現此功能的程式碼例項。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.linear{
  width:100%;
  height:600px;
  FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=##15A216, endColorStr=#fafafa); /*IE*/
  background:-moz-linear-gradient(top, #15A216, #fafafa);/*火狐*/
  background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#15A216), to(#fafafa));/*谷歌*/
  background-image: -webkit-gradient(linear, left bottom, left top, color-start(0, #15A216), color-stop(1, #fafafa));/* Safari & Chrome*/
  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#15A216', endColorstr='#fafafa'); /*IE6 & IE7*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#15A216', endColorstr='#fafafa')"; /* IE8 */
}
</style>
</head>
<body>
<div class="linear"></div>
</body>
</html>

以上程式碼實現了我們的要求，網頁背景具有漸變效果，並且相容所有主流瀏覽器。

相關文章