HTML5 Progress スタイルをカスタマイズするためのグラフィック コードの詳細な説明

Progress 要素は、HTML5 標準ドラフトに新しく追加された要素の 1 つです。この要素の定義については、ここをクリックしてください。デフォルトでは、Progress はシステムのデフォルト スタイルと同じ 進行状況バー を生成します。 Webkit の Progress のデフォルトのスタイル定義はここにあります。 Windows 7 と MaxOS Lion での表示効果は次のとおりです。

これは非常に良く見えますが、Windows XP で実行している場合はどうなるでしょうか?このことを考えるだけでも頭が痛くなりますが、一貫性を保つために、多くの場合、この進行状況バーのスタイルを制御できるようにしたいことは言うまでもありません。

Webkit プロジェクトの要素 Progress の定義を確認しました。Progress はレンダリング時に次の構造に解析されます:

<progress>
    ┗ <p> ::-webkit-progress-bar
         ┗ <p>::-webkit-progress-value

2 つの疑似要素::-webkit-progress-bar と ::-webkit-progress-value によって選択されます。シンボル (以前の疑似要素の名前は::-webkit-progress-bar-value でしたが、今年前半のパッチにより現在はこれに変更されています。ここで Chromium の関連する問題を確認できます)。最初のレイヤーを定義し、2 番目のレイヤーの 2 つの p のスタイルを定義します。

例:

progress {
    border-radius: 2px;
    border-left: 1px #ccc solid;
    border-right: 1px #ccc solid;
    border-top: 1px #aaa solid;
    background-color: #eee;
}
 
progress::-webkit-progress-bar {
    background-color: #d7d7d7;
}
 
progress::-webkit-progress-value {
    background-color: #aadd6a;
}

上記の CSS は、次の効果を持つプログレス バーを定義できます:

CSS

アニメーション、背景

写真

、その他の機能もサポートしているため、完全にパーソナライズされたものを作成できます自分のニーズに応じてプログレスバーを表示します。さらに、Gecko コア ブラウザでも、同様の pseudo-element::-moz-progress-bar を通じて同じ効果を実現できます。この要素はすべての IE システムでサポートされているわけではありません (これは確かです)。

以上がHTML5 Progress スタイルをカスタマイズするためのグラフィック コードの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。