網頁進度條一種簡單的實現方法

一個很簡單的進度條

用一個簡單的css屬性就能實現：cilp

clip：rect(top,right,bottom,left)

先寫一個小程式來解釋

<style>        .box {                 width: 200px;                height: 20px;                 background:#ccc;                 border-radius:10px;                position:relative             }       .clip {                position: absolute;                width: 100%;   height: 100%;               clip: rect(0px,100px,20px,0px);               background: red;               border-radius:10px;           }       </style><p class='box'>    <span class='clip'></span></p>

顯示效果：

給.clip加上position：absolute；width：100%；height：100%；相對於在box裡加上一個一樣寬高的盒子，背景為紅色；

rect(top,right,bottom,left)，相對於控制這個盒子顯示的面積，通過改變距離right的值，使顯示的面積變大