Comment dessiner un cercle en CSS-tutoriel CSS-php.cn

Comment dessiner un cercle en CSS

醉折花枝作酒筹

Libérer： 2023-01-05 16:10:11

original

10087 Les gens l'ont consulté

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.

Comment dessiner un cercle en CSS

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>

Copier après la connexion

Effet :

Comment dessiner un cercle en CSS