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

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.

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.

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%

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

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!