Maison >interface Web >tutoriel CSS >Comment dessiner un cercle en CSS
Comment dessiner un cercle en CSS
- 醉折花枝作酒筹original
- 2021-04-20 18:06:3410208parcourir
Comment dessiner un cercle avec CSS : définissez d'abord la largeur et la hauteur de l'élément div pour qu'elles soient égales ; puis utilisez l'attribut border-radius pour dessiner le cercle, le format de syntaxe est "border-radius:50". %". La propriété border-radius définit les coins arrondis de la bordure extérieure de l'élément, qui détermine un cercle lors de l'utilisation d'un rayon.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
La propriété border-radius est une propriété raccourcie utilisée pour définir les quatre propriétés border-*-radius.
Astuce : Cet attribut vous permet d'ajouter des bordures arrondies aux éléments !
Remarque : définissez les quatre valeurs pour chaque rayon dans cet ordre. Si le coin inférieur gauche est omis, c'est la même chose que le coin supérieur droit. Si le coin inférieur droit est omis, c'est la même chose que le coin supérieur gauche. Si le coin supérieur droit est omis, c'est la même chose que le coin supérieur gauche.
Avant le réglage :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid rgb(255, 113, 113);
}
</style>
</head>
<body>
<div></div>
</body>
</html>Effet :
Après le réglage :
border-radius: 50%;
Effet :
Apprentissage recommandé : tutoriel vidéo 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!