下面以谷歌瀏覽器為例 在CSS樣式表增加一組progresswebkitprocessvalue樣式，背景顏色為紅色，如圖 運行程序，看下結果與前面的有什么不同除了改變滑塊以后，我們還可以改進整個進度條樣式，代碼如下圖 最后運行程序；lt！DOCTYPE html PUBLIC quotW3CDTD XHTML 10 TransitionalENquot quotDTDxhtml1transitionaldtdquot lthtml lthead ltmeta；1打開編輯器，新建一個HTML，并定義一個p，并給50px的高度2接下來在style中設置p的樣式，這里使用lineargradient編寫一個默認方向的紅藍漸變，漸變的方向可以省略的3如果想設置漸變方向為從右至左，只需要給。

現(xiàn)在進度條在一點一點的加了可以通過修改定時器的間隔時間，改小一點，就會讓進度條走得快一點，改大點，就會走得慢 我們把它改成200 var timer = setInterval#34set_progress#34，200 看下效果；我們首先需要新建一個html5的頁面，其使用的progress元素實在html5時代才出現(xiàn)的我們在新建的頁面中，輸入一個段落標簽，一個進度條，一個button按鈕然后，我們需要設置一下進度條顯示的進度value代表從多少開始，max代表到；可以用html5實現(xiàn)，也可以做成gif的圖片，你只需要設置為和你程序設置一樣的時間然后進度條自動結束就好了用圖片是最好實現(xiàn)，用ps軟件就可以制作這個的實現(xiàn)，有很多中方法，簡單的，是使用 DIV 嵌套，例如ltdiv style=；無非是在一條線上進行變化的線性和像圓一樣向四周擴散的徑向后面的四個值分別代表相應方向的px值，可以從左順時針轉的順序記憶，但是它代表的是to，截止到的顏色from這就是開始的顏色了to和from是同時出現(xiàn)的，最；HTML中只能實現(xiàn)背景背景漸變圖片不能實現(xiàn)漸變，圖片只能通過CSS濾鏡實現(xiàn)灰度，模糊，褐色，曝光，反色，色相旋轉，陰影，透明，改變飽和度，改變對比度，這些效果要真正實現(xiàn)圖片漸變，只能用Photoshop來修改圖片，然后把圖片。

html中將背景顏色漸變步驟如下1先使用一個div標簽2然后在header標簽里面設置ltdiv標簽的css樣式3顏色漸變要有一個范圍，需要給div設定width和height，也就是寬度和高度4然后設定div的background背景屬性，如圖；最簡單的思路是， 通過js獲取到的寬度范圍，分別賦予不同的class，比如030%，給標簽class=“green”，3070%，給標簽class=“yellow”，70%100%，給標簽class=“red”；例如indexhtml2在indexhtml中的ltstyle標簽中，輸入css代碼divwidth200pxheight150pxbackgroundlineargradientred，white 3瀏覽器運行indexhtml頁面，此時td中的div的背景顏色從紅色到白色漸變；對控件綁定input事件，當滑塊滑動時會觸發(fā)該事件，此時完成對進度條的填充，這里我使用的是線性漸變lineargradientto right， #059CFA， white ’ + thisvalue + ‘%， white這種方式，淡藍色和白色兩種顏色從左至右漸變，漸變的長度；第一種就是最常用的插入背景圖片做個漸變圖就可以了 第二種就是在ltbody內 加入 style=quotfilterprogidstartColorStr=#39#7CBE42#39， endColorStr=#39#84C34A#39， gradientType=#390#39quot。

線性漸變正如前面所說，線性漸變以線性的模式來改變顏色我們可以通過2D上下文的createLinearGradient方法來創(chuàng)建一個線性漸變下面是一個例子var canvas = documentgetElementByIdex1var context = canvasgetContext；1HTML實現(xiàn)漸變 lt！DOCTYPE html lthtml lthead ltmeta charset=quotUTF8quot lttitlelttitle ltstyle week width 600pxheight 600pxbackground lineargradientred， yellow， blueborderradius 300px。