Maison > Article > interface Web > Comment utiliser border-radius en CSS3 ? Exemple pour expliquer comment dessiner un cercle en utilisant border-radius
Comment utiliser border-radius en CSS3 ? Exemple pour expliquer comment dessiner un cercle en utilisant border-radius
- yuliaoriginal
- 2018-09-07 13:53:403698parcourir
En CSS3, border-radius est utilisé pour obtenir l'effet de coins arrondis. Ce qui suit décrit son utilisation en détail. Enfin, un exemple est utilisé pour expliquer comment utiliser border-radius pour dessiner un cercle.
La propriété border-radius est une propriété abrégée permettant de définir les quatre propriétés border-*-radius.
Remarque : si le coin inférieur gauche est omis, le coin supérieur droit est le même. Si le coin inférieur droit est omis, le coin supérieur gauche est le même. Si le coin supérieur droit est omis, le coin supérieur gauche est le même. Sa valeur peut être une valeur de longueur ou cent pour cent.
Lorsque quatre valeurs sont données, ce sont le coin supérieur gauche, le coin supérieur droit, le coin inférieur droit et le coin inférieur gauche. C'est-à-dire border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
Lorsque trois valeurs sont données, elles représentent le coin supérieur gauche coin, (coin supérieur droit, coin inférieur gauche), coin inférieur droit
Lorsque deux valeurs sont données, cela représente (coin supérieur gauche, coin inférieur droit), (coin supérieur droit, coin inférieur gauche)
Lorsqu'une valeur est donnée, elle représente le même effet dans les quatre coins
Exemple 1 : Donner une valeur
div{width: 150px;height: 150px;border-radius: 15%;background: red;}Rendu :
Exemple 2 : Donner deux valeurs
div{width: 150px;height: 150px;border-radius: 5% 15%;background: red;}Rendu :
Exemple 3 : Donner trois valeurs
div{width: 150px;height: 150px;border-radius: 5% 15% 30%;background: red;}Rendu :
Exemple 4 : Donner quatre valeurs
div{width: 150px;height: 150px;border-radius: 5% 15% 30% 45%;background: red;}Rendu :
Exemple : Utiliser border-radius pour créer un cercle
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a1{width: 200px;height: 200px;background: beige;text-align:
center;line-height: 200px;font-size: 50px;}
.a2{width: 200px;height: 200px;background: pink;border-radius:
50%;}
</style>
</head>
<body>
<div class="a1">
<div class="a2">HELLO</div>
</div>
</body>
</html>Rendu :
Ce qui précède est une introduction détaillée au filetage. Les débutants peuvent essayer et pratiquer davantage !
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!