progress标签样式总结

HTML5里面有个新增标签progress，它可以用来表示进度，但是它的样式控制却比较特殊，正常情况下不加任何样式，它显示如下：

现在我们要设置总长度背景色和已完成进度背景色，这里在不同浏览器下使用的样式不一样，Opera浏览器只能为浏览器默认样式，即上面样式。
Chrome下：

progress{
    width: 168px;
    height: 5px;
    color:#f00;
    background:#EFEFF4;
}
/* 表示总长度背景色 */
progress::-webkit-progress-bar{     
   background-color:#EFEFF4;
}
/* 表示已完成进度背景色 */
progress::-webkit-progress-value{
     background-color:#f00;
}

FireFox下：

progress{
    width: 168px;
    height: 5px;
    color:#f00;
    background:#EFEFF4;     /* 表示总长度背景色 */
}
/* 表示已完成进度背景色 */
progress::-moz-progress-bar{
     background-color:#f00;
}

IE10及以上：

progress{
    width: 168px;
    height: 5px;
    color:#f00;      /* 表示已完成进度背景色 */
    background:#EFEFF4;     /* 表示总长度背景色 */
}

调整之后进度条样式为：