html5のprogressタグのCSSスタイルのまとめ

HTML5 では、進行状況バーを表すために使用される進行状況タグが追加されました。

<progress value="100" max="100" class="hot">

表示効果は次のとおりです:

CSSスタイルコードは次のとおりです:

progress{
        width: 168px;
    height: 5px;
        
}progress::-webkit-progress-bar{
       background-color:#d7d7d7;
}progress::-webkit-progress-value{
     background-color:orange;
}

説明、Chromeブラウザでは、

進行状況は次の構造でレンダリングされます

progress

↓

: :-webkit-progress-bar 完全な進行状況

↓

::-webkit-progress-value 完了した進行状況

これら 2 つの疑似要素を使用してスタイルを設定します。

ただし、IE10 などの他のブラウザでは異なります。これら 2 つの疑似要素は機能しません。カラー スタイルを直接使用して、完了した進行状況の色を変更でき、進行状況全体が背景になります

progress-bar FireFox では、これは完了した進行状況を指し、Opera では、このスタイルはブラウザーのデフォルト スタイルのみを指します。

したがって、互換性の記述方法は次のように考えられます

progress{
   color:orange; /*兼容IE10的已完成进度背景*/
   border:none;
   background:#d7d7d7;/*这个属性也可当作Chrome的已完成进度背景，只不过被下面的::progress-bar覆盖了*/      
   }progress::-webkit-progress-bar{
   background:#d7d7d7;
}progress::-webkit-progress-value,
progress::-moz-progress-bar{
     background:orange;
}

以上がhtml5のprogressタグのCSSスタイルのまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。