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

3665 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 :

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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