Comment utiliser border-radius en CSS3 ? Exemple pour expliquer comment dessiner un cercle en utilisant border-radius-tutoriel CSS-php.cn

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

yulia

Libérer： 2018-09-07 13:53:40

original

3742 Les gens l'ont consulté

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;}

Copier après la connexion

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;}

Copier après la connexion

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;}

Copier après la connexion

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;}

Copier après la connexion

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>

Copier après la connexion

Rendu :