CSS的优点在于的可以随意组合HTML元素来实现许多中效果，这儿我将使用CSS来实现一个运行进度条，效果如下：
思路是用两个div来作为进度条外观，表示进度的div和外面div宽度和高度保持一致，并是外面的div的overflow为hidden，这样就可以省去内部div超出的部分，然后通过控制内部div的margin-top属性来控制进度条的进度，这些可以在js中来实现。做法还算简单，下面是html和css文件内容：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>Css Demo</title> 6 <link rel="stylesheet" href="style.css" /> 7 <script> 8 function setProgressValue(id, val) 9 { 10 var progress = document.getElementById(id); 11 var masker = progress.getElementsByClassName('progress_masker'); 12 var value = progress.getElementsByClassName('progress_value'); 13 if(masker.length>0) 14 { 15 masker[0].style.marginTop = "" + val + "%"; 16 } 17 if(value.length>0) 18 { 19 value[0].innerHTML = "" + (100 - val) + "%"; 20 } 21 } 22 </script> 23 </head> 24 <body onLoad="setProgressValue('progress', 20);"> 25 <div id="content"> 26 <div id="progress"> 27 <div class="progress_value"></div> 28 <div class="progress_outer"> 29 <div class="progress_inner"> 30 <div class="progress_masker"> 31 </div> 32 </div> 33 </div> 34 <div> 35 </div> 36 </body> 37 </html>
1 #progress 2 { 3 width:200px; 4 height:200px; 5 padding:0; 6 } 7 .progress_outer 8 { 9 height:100%; 10 width:100%; 11 background-color:gray; 12 border-radius:calc(100%/2); 13 border:5px solid black; 14 padding:0; 15 16 box-shadow: 0px 2px 4px #555555; 17 -webkit-box-shadow: 0px 2px 4px #555555; 18 -moz-box-shadow: 0px 2px 4px #555555; 19 } 20 21 .progress_inner 22 { 23 height:100%; 24 width:100%; 25 border:1px solid yellow; 26 border-radius:calc(100%/2); 27 position:relative; 28 background-color:white; 29 overflow:hidden; 30 text-align:center; 31 32 } 33 34 .progress_masker 35 { 36 height:100%; 37 width:100%; 38 background: -webkit-gradient(linear,center top,center bottom,from(#0ff), to(#0f0)); 39 background: -moz-linear-gradient( top,#fff,#0f0); 40 background: -o-linear-gradient( top,#fff,#0f0) 41 } 42 43 .progress_value 44 { 45 width:100%; 46 color:black; 47 font-weight:bolder; 48 background-color:transparent; 49 text-align:center; 50 }
因为在css中采用了相对布局，所以要更改进度条的大小只用更改最外层的div的宽度和高度，在这儿就是id为progress的div。