Zusammenfassung der CSS-Stile für das Progress-Tag in HTML5

In HTML5 verfügt über ein neues -Fortschritts-Tag, das zur Darstellung des -Fortschrittsbalkens verwendet wird.

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

Der Anzeigeeffekt ist wie folgt:

Der CSS-Stilcode lautet wie folgt:

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

Erklären Sie, dass im Chrome-Browser

Fortschritt mit der folgenden Struktur gerendert wird:

progress

↓

::-webkit -progress- bar Alle Fortschritte

↓

::-webkit-progress-value Abgeschlossener Fortschritt

Fügen Sie über diese beiden Pseudoelemente Stile hinzu.

In anderen Browsern wie IE10 ist das jedoch anders. Diese beiden Pseudoelemente funktionieren nicht. Sie können den Farbstil direkt verwenden, um die Farbe des abgeschlossenen Fortschritts zu ändern, und der gesamte Fortschritt ist im Hintergrund 🎜>

In Firefox stellt der Fortschrittsbalken den abgeschlossenen Fortschritt dar und der Hintergrund stellt den gesamten Fortschritt dar. In Opera kann dieser Stil jedoch nur der Standardstil des Browsers sein.

Die Kompatibilitätsschreibmethode kann also wie folgt betrachtet werden

Das obige ist der detaillierte Inhalt vonZusammenfassung der CSS-Stile für das Progress-Tag in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!