Passen Sie den Stil von Progress in HTML an

Das

Progress-Element ist eines der neu hinzugefügten -Elemente im HTML5-Standardentwurf. Für die W3C-Definition dieses Elements klicken Sie bitte hier. 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 von Element Progress im Webkit-Projekt wird beim Rendern in die folgende Struktur analysiert:

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

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.

Beispiel:

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

Das obige CSS kann einen Fortschrittsbalken mit folgendem Effekt definieren:

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 vonPassen Sie den Stil von Progress in HTML an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!