html_progress元素以及樣式修改

目錄

• progress元素的基本屬性
• 為progress元素設置樣式
  • 在chrome、Firefox、Opera、EDGE下對border與bgc的設置的區別
  • 在Firefox下對progress的樣式設置
  • 在chorme下對progress的樣式設置
  • Opera瀏覽器無法設置已完成進度的顏色
  • progress圓角
  • IE10瀏覽器的progress樣式設置
• 對progress元素在不同瀏覽器下的最大兼容

progress元素的基本屬性

• progress元素有max,value,position.labels四個屬性
  • max:設置了進度條的最大數值，其用作分母的效果。返回進度條max屬性的值。
  • value:設置了進度條的當前的值，其用作分子的效果。返回進度條vaue屬性的值。
  • labels:返回進度條的標簽的列表。
  • position:返回當前進度條的位置。（返回的是一個小數，其值是value / max的值，如果不設置value值，返回的是-1）

為progress元素設置樣式

• progress元素的樣式設置的瀏覽器支持
  

在chrome、Firefox、Opera、EDGE下對border與bgc的設置的區別

border:3px solid pink;
background-color:yellow;
<!-- 分界線 -->
<progress max="100" value="30">你就不能用個好點的瀏覽器嗎？！！</progress>

• chrome瀏覽器
  
• Firefox瀏覽器
  
• Opera瀏覽器
  
• EDGE瀏覽器
  

在Firefox下對progress的樣式設置

• Firefox需要在progress::-moz-progress-bar下對已完成進度的顏色進行設置

        progress {
            width: 168px;
            height: 5px;
            background: grey;
            /* 表示總長度背景色 */
        }

        /* 表示已完成進度背景色 */
        progress::-moz-progress-bar {
            background-color: lightblue;
        }

在chorme下對progress的樣式設置

        progress {
            width: 168px;
            height: 20px;
            background-color: #fff;
            /*bgc 需要被設置，否則背景色無法被顯示出來*/
        }

        /* 表示總長度背景色 */
        progress::-webkit-progress-bar {
            background-color: lightsalmon;
        }

        /* 表示已完成進度背景色 */
        progress::-webkit-progress-value {
            background: lightskyblue;
        }

Opera瀏覽器無法設置已完成進度的顏色

在Opera瀏覽器下，它的已完成進度一直都是綠的
在版本：68.0.3618.173 中，opera瀏覽器可以按照chrome瀏覽器一樣的方法設置

progress圓角

            border-radius: 1em;
            overflow: hidden;

IE10瀏覽器的progress樣式設置

IE10直接使用color屬性設置已完成進度的顏色

        progress {
            width: 168px;
            height: 5px;
            background: lightseagreen;
            color: lightpink;/*表示已完成進度的顏色*/
            border-radius: 1em;
            overflow: hidden;
        }

對progress元素在不同瀏覽器下的最大兼容

progress {
    width: 160px;
    border: 1px solid #0064B4;  
    background-color:#e6e6e6;
    color: #0064B4; /*IE10下已完成進度的顏色*/
}

progress::-moz-progress-bar { background: #0064B4; }/*表示在Firefox下已完成進度的顏色*/
progress::-webkit-progress-bar { background: #e6e6e6; }/*表示在chrome下全部進度的顏色*/
progress::-webkit-progress-value  { background: #0064B4; }/*表示在chrome下已完成進度的顏色*/