如果你不是很明白clip屬性，那麼我就用大白話來解釋一下，clip:rect(0px,0px,0px,0px)有四個值，同理是順時針方向賦值，上右下左，記錄改元素裁切方式，
例如:乙個元素div，其width:300px;height:300px; clip:rect(0px,100px,60px,0px)
表示裁切的左邊距離原元素上邊緣0px；
裁切的右邊距離原始左邊緣100px；
裁切的下邊距離原始元素上邊緣是60px；
裁切的左邊距離原始元素元素左邊距離是0px；
如果明白了，那麼再來一張圖測試一下，如果設定是clip:rect(10px,100px,40px,5px)應該啥樣子呢？如下
說到這裡，我就當你明白了，繼續往下說，
所以現在我們要改變的就是裁切元素的右值，讓其等於制定的寬度，那麼元素就全部呈現出來了。
對於css我做的還是比較low的，那麼還是要貼出我很low的css**，
頁面元素<這裡需要解釋一下為啥會有3個元素，乙個是元素容器(progressbox)基本就是想突出邊框，讓使用者知道100%應該是有多長的容量，body
>
<
div
id="progressbox"
>
<
div
id="progressbar"
>
div>
<
div
id="progresstext"
>0%
div>
div>
<
input
type
="button"
value
="開 始"
id="btn"
style
="position:absolute;left:50%;top:20%;"
/>
body
>
第二個progressbar是表示不斷變化的元素背景色設定為淡藍色，
第三個是表示進度顯示的數值文字
然後現在要做的就是js指令碼
因為現在沒有與伺服器互動所以我就用setinterval來模擬增長因子
timer = setinterval(progressfn, 10);上邊這段js是通過改變裁切的右邊距實現展示進度條背景色，同時改變進度文字值。function
progressfn()
else
};
利用xmlhttprequest第二版還定義的progress事件可以知道上傳進度，來配合我們頁面前端的展示進度來真正實現有後端互動的進度條
先上**
其中的event.loaded表示當前載入了多少位元組流，而event.total表示總共有多少位元組流 得到這樣乙個百分比，
然後呼叫我們事先定義好的progressfn()函式就ok了，感覺還是挺方便的。
當然除了這種方式還有我前面提到過的配合flash來呼叫我們實現定義好的函式等。
以上就是我今天想要分享的小知識點，本人水平有限，如果有錯誤和建議
還懇請指出，如果覺得對你有用，請支援一下。
用css2屬性clip實現網頁進度條
前言 css2的屬性clip 如果你不是很明白clip屬性，那麼我就用大白話來解釋一下，clip rect 0px,0px,0px,0px 有四個值，同理是順時針方向賦值，上右下左，記錄改元素裁切方式，例如 乙個元素div，其width 300px height 300px clip rect 0p...
CSS2背景屬性
background 用於設定background color，background image，background repeat，background attachemnt，background position屬性 background color 背景顏色 屬性 取值 red ff0000 ...
前端 CSS2常用屬性
font weight font size font family line height font variant font direction 設定文字方向。vertical align 設定元素的垂直對齊 text align 對齊元素中的文字 text decoration 向文字新增修飾 ...