CSS3 設計樣式的一個進度條

一個 CSS3 樣式的進度條設計，只有 CSS 的樣式設計可以加到其他的進度條上讓整體視覺看起來更加有設計感。

第一步 先寫入進度條的位置 設定 class
<div id="container">
<h1>CSS3 Progress Bars</h1>
    <div id="bars-container">
        <div class="progress-bar blue"></div>
        <div class="progress-bar orange alt"></div>
        <div class="progress-bar green"></div>
        <div class="progress-bar yellow alt"></div>
        <div class="clear"></div>
    </div>
</div>

第二步 把CSS設計樣式寫入
*{margin:0;padding:0}body{width:640px;margin:auto;padding:100px 0 50px 0;background:url(body-bg.png) #222;-webkit-font-smoothing:antialiased}#container{font:16px/24px 'Helvetica Neue',sans-serif;text-align:center;color:#fff}h1{font-size:36px;line-height:36px}a{color:#fff}#bars-container{margin:50px 0}.progress-bar{float:left;margin:10px 0}.alt{float:right}.clear{clear:both}
/* 基礎的設計樣式 */
.progress-bar {
width: 300px;
height: 24px;
padding: 4px;
background-color: rgba(0, 0, 0, .25);
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-webkit-box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
-moz-box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
box-shadow: inset 0 0 3px #000, 0 0 2px rgba(255, 255, 255, .1);
}
/* 進度條顏色的一部分 */
.progress-bar:before {
content: '';
display: block;
position: absolute;
width: 200px;
height: 24px;
background: #999;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 3px rgba(0, 0, 0, .4), 0 1px 1px #000;
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 3px rgba(0, 0, 0, .4), 0 1px 1px #000;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 3px rgba(0, 0, 0, .4), 0 1px 1px #000;
}
.progress-bar:after {
content: '|||||||||||||';
display: block;
position: absolute;
width: 200px;
height: 24px;
overflow: hidden;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-transform: skewX(-30deg);
-moz-transform: skewX(-30deg);
-o-transform: skewX(-30deg);
transform: skewX(-30deg);
font:bold 120px/80px sans-serif;
letter-spacing: -6px;
color: #000;
opacity: 0.06;
}
.blue:before {
background: #207ba9;
background: -webkit-linear-gradient(#5fb6e1, #207ba9);
background: -moz-linear-gradient(#5fb6e1, #207ba9);
}
.yellow:before {
background: #dda600;
background: -webkit-linear-gradient(#fc3, #c90);
background: -moz-linear-gradient(#fc3, #c90);
}
.green:before {
background: #462;
background: -webkit-linear-gradient(#77b33c, #462);
background: -moz-linear-gradient(#77b33c, #462);
}
.orange:before {
background: #f28518;
background: -webkit-linear-gradient(#f28518, #9d5209);
background: -moz-linear-gradient(#f28518, #9d5209);
}

作者網站：http://galengidman.com/2010/12/20/css3-progress-bars
檔案大小：9.58 KB(包含範例)
檔案下載：http://cl.ly/6VbT/download/css3progressbars.zip
檔案備份：下載