Comment transformer un carré en cercle avec CSS

Comment transformer un carré en cercle en utilisant CSS : Vous pouvez utiliser l'attribut border-radius, tel que [border-radius:150px]. La propriété border-radius nous permet d'ajouter des bordures arrondies aux éléments.

L'environnement d'exploitation de ce tutoriel : Système Windows 10, CSS3, cet article est applicable à toutes les marques d'ordinateurs.

Introduction à l'attribut :

L'attribut border-radius est un attribut composite qui peut spécifier jusqu'à quatre attributs border -*- radius. Cet attribut vous permet d'ajouter une bordure arrondie à. un élément.

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

Syntaxe :

border-radius: 1-4 length|% / 1-4 length|%;

Implémentation du code :

Créer un nouveau fichier html , Entrez la balise div dans la balise body et ajoutez un nom de classe (case) à la balise div, comme indiqué dans la figure :

Ajouter des attributs CSS à la classe name (box), Laissez-le devenir un carré, comme indiqué dans l'image :

Ajouter un attribut CSS, code : border- radius:150px, tel que Comme indiqué dans l'image :

Lorsque vous exécutez la page Web, vous pouvez voir que le carré s'est transformé en cercle, comme indiqué dans le photo :

Recommandations associées : Tutoriel CSS

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!