Résumé des styles CSS pour la balise de progression en html5

En HTML5, a une nouvelle balise de progression , qui est utilisée pour représenter la barre de progression .

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

L'effet d'affichage est le suivant :

Le code de style CSS est le suivant :

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

Expliquez, dans le navigateur Chrome

la progression est rendue avec la structure suivante

progression

↓

::-webkit -progress- bar Tous les progrès

↓

::-webkit-progress-value Progression terminée

Ajoutez-y des styles grâce à ces deux pseudo-éléments.

Mais c'est différent dans d'autres navigateurs, comme IE10. Ces deux pseudo-éléments ne fonctionnent pas. Vous pouvez directement utiliser le style de couleur pour modifier la couleur de la progression terminée, et toute la progression est en arrière-plan<.>

Dans FireFox, la barre de progression représente la progression terminée et l'arrière-plan représente la progression entière. Cependant, dans Opera, ce style ne peut être que le style par défaut du navigateur.

La méthode d'écriture de compatibilité peut donc être considérée comme suit

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!