知識點：rgb全色循環算法，HEX與RGB顏色轉換算法、CSS3顏色漸變，CSS3漸變色兼容ie方法，定時器與循環，函數封裝,數組應用等。

css代碼：

  <style>
    *{margin:0;padding:0;}
    body#wrap{width:100%;height:500px;
}
  </style>

JavaScript代碼：

    <script>

            function convert(sRgb){ /*rgb轉換成HEX*/
                var sRgb=sRgb;
                var sHex=sRgb.toString(16);
                sHex=sHex.length<2?‘0‘+sHex:sHex 
                /* 三目判斷  判斷條件 ？ 符合條件 ：不符合條件*/
                return sHex;
            }
            function gColor(colorL,colorR){
                if(navigator.userAgent.match(/Trident/i)&&navigator.userAgent.match(/MSIE [7|8|9].0/i)){
                    //通過正則檢測瀏覽器信息是否是ie 並且 ie版本是不是 7或者8或者9 之一
                    oWrap.style.filter = "progid:DXImageTransform.Microsoft.gradient( startColorstr=" + colorL + ", endColorstr=" + colorR + ",GradientType=0 )";
                }else{
                    oWrap.style.background=‘-webkit-linear-gradient(left,‘+colorL+‘,‘+colorR+‘)‘ //谷歌
                    oWrap.style.background=‘-ms-linear-gradient(left,‘+colorL+‘,‘+colorR+‘)‘  //ie 10 11
                }
            }
        })();

    </script>
 

web前端小案例-css3制作瀏覽器背景漸變背