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:403694parcourir

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 :

Comment utiliser border-radius en CSS3 ? Exemple pour expliquer comment dessiner un cercle en utilisant border-radius

Exemple 2 : Donner deux valeurs

div{width: 150px;height: 150px;border-radius: 5% 15%;background: red;}

Rendu :

Comment utiliser border-radius en CSS3 ? Exemple pour expliquer comment dessiner un cercle en utilisant border-radius

Exemple 3 : Donner trois valeurs

div{width: 150px;height: 150px;border-radius: 5% 15% 30%;background: red;}

Rendu :

Comment utiliser border-radius en CSS3 ? Exemple pour expliquer comment dessiner un cercle en utilisant border-radius

Exemple 4 : Donner quatre valeurs

div{width: 150px;height: 150px;border-radius: 5% 15% 30% 45%;background: red;}

Rendu :

Comment utiliser border-radius en CSS3 ? Exemple pour expliquer comment dessiner un cercle en utilisant border-radius

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!

css3 border

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment centrer le contenu dans un tableau CSS ? Introduction aux styles de texte dans les tableaux CSSArticle suivant：Comment centrer le contenu dans un tableau CSS ? Introduction aux styles de texte dans les tableaux CSS

Articles Liés

Voir plus