Introduction de l'article de wulin.com (www.vevb.com): Apprenez un peu de HTML5 + CSS3 chaque jour, accumulez-vous lentement l'expérience et commencez par les bases. Ce qui suit introduit principalement des boutons de lecteur simple de dessin.
Apprenez un peu de HTML5 + CSS3 chaque jour, accumulez-vous lentement l'expérience et commencez à partir des bases. Ce qui suit introduit principalement des boutons de lecteur simple de dessin;
Tout d'abord, voyons à quoi ressemble la bordure de réglage lorsque la largeur et la hauteur de la div sont 0?
Le code est le suivant:
1
Les rendus d'opération sont les suivants:
Alors, pouvons-nous voir quelque chose de cette image?
Si nous enlevons trois des frontières, pouvons-nous dessiner un triangle? La réponse est oui. Avec un seul code, vous pouvez dessiner un triangle:
Effet:
Maintenant, il est facile de dessiner le bouton du lecteur. Combiné avec quelques conseils d'apprentissage des notes et un peu d'adaptation du code pour dessiner le triangle ci-dessus, il est facile de dessiner le dernier bouton du joueur.
Le code est le suivant:
1
Bouton
Effet:
Résumé: Cet exemple simple utilise principalement l'utilisation des frontières pour dessiner des triangles et se transformer légèrement, comme la modification de la largeur de la bordure ou la taille du div, pour dessiner d'autres graphiques de base. De plus, les coins arrondis, les ombres et les transformations graphiques dans CSS3 sont également utilisés.