Detaillierte Erläuterung des Grafikcodes zum Anpassen des HTML5-Progress-Stils

Das

Progress-Element ist eines der neu hinzugefügten -Elemente im HTML5-Standardentwurf. Bitte klicken Sie hier für die Definition dieses Elements. Standardmäßig generiert Progress einen Fortschrittsbalken, der dem Standardstil des Systems entspricht. Die Standardstildefinition für Progress in Webkit finden Sie hier. Der Anzeigeeffekt in Windows 7 und MaxOS Lion ist wie folgt:

Es sieht ziemlich gut aus, aber was ist, wenn es unter Windows XP läuft? ? Wenn Sie darüber nachdenken, bekommen Sie schon Kopfschmerzen, ganz zu schweigen davon, dass wir aus Gründen der Konsistenz in vielen Fällen immer noch in der Lage sein möchten, den Stil dieses Fortschrittsbalkens zu steuern.

Die Definition des Elementfortschritts im Webkit-Projekt wird beim Rendern in die folgende Struktur analysiert:

Durch ::-webkit-progress-bar und ::- webkit-progress-value zwei Pseudo-Element-Selektoren (der Name des Pseudo-Elements war zuvor::-webkit-progress-bar-value, ein Patch in der ersten Hälfte dieses Jahres hat es zu dem geändert, was es jetzt ist. Hier Sie (siehe Chromium Issue), können Sie die Stile der beiden Ps auf der ersten und zweiten Ebene definieren.

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

Beispiel:

Das obige CSS kann einen Fortschrittsbalken mit folgendem Effekt definieren:

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;
}

Unterstützt auch CSS

Animation

, Hintergrundbild und andere Funktionen, sodass Sie einen vollständig personalisierten Fortschrittsbalken nach Ihren eigenen Bedürfnissen erstellen können. Darüber hinaus kann der Gecko-Kernbrowser den gleichen Effekt auch durch ein ähnliches Pseudoelement::-moz-progress-bar erzielen. Dieses Element wird nicht in allen IE-Systemen unterstützt (das ist eine Selbstverständlichkeit).

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Grafikcodes zum Anpassen des HTML5-Progress-Stils. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!