在網頁設計中，進度條是經常使用的一個元素。而如何實現優美的進度條呢？CSS3提供了一個非常簡單的方法——使用圓角（border-radius）屬性來實現圓角進度條。
.progress{
height:10px;
border-radius:5px;
overflow:hidden;
background-color:#ddd;
}
.progress-bar{
width:0%;
height:100%;
background-color:#31b0d5;
border-radius:5px;
transition:width 0.5s ease-in-out;
}以上就是我們要實現的進度條的樣式。首先，我們在一個
元素中包含了一個進度條，設置了高度和邊框半徑，并隱藏了超出進度條的部分。
然后，我們用另一個
元素作為進度條本身，設置了寬度、高度、邊框半徑和背景顏色，并添加了動畫效果。這個動畫實現了進度條寬度的變化，是由CSS3的transition屬性實現的。
<div class="progress"> <div class="progress-bar"></div> </div>
最后，我們在HTML中將兩個
元素組合起來，即可完成進度條的實現。
（完）
上一篇純css3點擊下拉菜單
下一篇純css3最少代碼