ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5 Progress スタイルをカスタマイズするためのグラフィック コードの詳細な説明

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

黄舟
リリース: 2017-04-01 11:50:49
オリジナル
2274 人が閲覧しました

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

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

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

HTML5 Progress スタイルをカスタマイズするためのグラフィック コードの詳細な説明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

アニメーションHTML5 Progress スタイルをカスタマイズするためのグラフィック コードの詳細な説明、背景

写真

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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート