Maison >interface Web >tutoriel CSS >Comment créer un gâteau rond et le remplir de couleur en CSS

Comment créer un gâteau rond et le remplir de couleur en CSS

WBOY
WBOYoriginal
2021-11-18 16:58:333042parcourir

Méthode : 1. Ajoutez le style "largeur : valeur de diamètre ; hauteur : valeur de diamètre" à l'élément pour créer un carré ; 2. Ajoutez le style "border-radius:50%" à l'élément pour définir les coins arrondis du carré. pour en faire un cercle ; 3. Ajoutez le style "background: color value" à l'élément et remplissez le cercle de couleur.

Comment créer un gâteau rond et le remplir de couleur en CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Comment créer un gâteau rond en CSS et le remplir de couleur

1 Nous créons un nouveau fichier de page Web html et le nommons test.html Ensuite, nous utilisons le fichier test.html pour expliquer comment. pour implémenter css3 Un effet de motif circulaire.

Dans le fichier test.html, utilisez les balises div. Ajoutez un style à la balise div et définissez l'attribut de classe de la balise div sur mybkkd.

Écrivez la balise style css, et le style mybkkd sera écrit dans la balise.

Dans la balise css, utilisez l'attribut de classe mybkkd de la balise div pour obtenir un effet de motif circulaire.

Comment créer un gâteau rond et le remplir de couleur en CSS

2. Dans la balise de style CSS, entre parenthèses, le div de mybkkd définit le style de l'attribut CSS, les attributs de largeur et de hauteur sont définis sur la même valeur pour représenter le diamètre et la longueur du cercle, et l'attribut border-radius est utilisé pour définir le coin du cercle, à 50 %, le graphique du coin arrondi est exactement circulaire et l'attribut background est utilisé pour définir la couleur du cercle.

width: 100px;
height: 100px;
background: red;
border-radius: 50%

Comment créer un gâteau rond et le remplir de couleur en CSS

Parcourez test.html dans le navigateur pour voir si l'effet peut être obtenu.

Comment créer un gâteau rond et le remplir de couleur en CSS

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn