Créez des graphiques communs à l'aide de la propriété border-radius en CSS3

CSS3 a ajouté de nombreux nouveaux attributs, dont certains sont très pratiques, qui non seulement améliorent l'efficacité du travail, mais rendent également la page plus belle. Par exemple, l'attribut border-radius en CSS3, nous pouvons l'utiliser pour dessiner certains graphiques couramment utilisés, réduisant ainsi le fardeau des artistes. Cet article vous expliquera comment utiliser l'attribut border-radius pour créer un cercle, un demi-cercle, un secteur et un arc parfaits . Les amis intéressés peuvent y jeter un œil, j'espère que cela pourra vous aider.

1. Utilisez border-radius pour créer un cercle parfait

Les quatre valeurs​​de l'attribut border-radius représentent : coin supérieur gauche, coin supérieur droit coin, coin inférieur droit, coin inférieur gauche. Si une seule valeur est définie, cela signifie que les quatre coins ont la même taille. Lorsque nous dessinons un cercle, il suffit de définir les valeurs des quatre coins sur la moitié de la longueur du div. La longueur et la largeur du div sont toutes deux de 200 px, et les valeurs des quatre coins sont de 50 % (ici, 100 px). ). Le code est le suivant :

div{
    width: 200px;
    height: 200px;
    background: orangered;
    border-radius: 50%;
    line-height: 200px;
    text-align: center;
    font-size: 40px;
   }

Image d'effet :

2. Utilisez la bordure-radius pour créer un demi-cercle

Le coin supérieur gauche et le coin supérieur droit du demi-cercle sont des coins arrondis, et le coin inférieur droit et le coin inférieur gauche sont des angles droits. Définissez les valeurs dans le coin supérieur gauche et le coin supérieur droit sur la moitié de la longueur du div, et laissez les valeurs dans le coin inférieur droit et le coin inférieur gauche inchangées sur 0. De plus, définissez la valeur de hauteur sur la moitié ; la hauteur d'origine doit être un demi-cercle standard. Le code est le suivant :

div{
    width: 200px;
    height: 100px;
    background: red;
    border-radius: 100px 100px 0 0;
    line-height: 100px;
    text-align: center;
    font-size: 40px;
    }

Rendu :

3. Utilisez border-radius pour créer une forme en éventail

Le coin supérieur gauche de la forme en éventail est arrondi et les trois autres coins sont à angles droits. Définissez simplement la valeur du coin supérieur gauche sur la même valeur que la largeur et la hauteur, et laissez les valeurs des trois autres coins inchangées (égales à 0). Le code est le suivant :

div{
    width: 200px;
    height: 200px;
    background: red;
    border-radius: 200px 0 0;
    line-height: 200px;
    text-align: center;
    font-size: 40px;
   }

Rendu :

Utiliser border-radius pour créer des arcs

Les deux angles opposés de l'arc changent, mais les deux autres angles opposés restent inchangés. Définissez son coin supérieur gauche et son coin inférieur droit sur la même valeur que la largeur et la hauteur, et laissez le coin supérieur droit et le coin inférieur gauche inchangés (égaux à 0). Ajoutez également un attribut de transformation pour le faire pivoter en un arc plat. Le code est le suivant :

div{
    width: 200px;
    height: 200px;
    background: red;
    line-height: 200px;
    text-align: center;
    font-size: 40px;
    border-radius: 200px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
   }

Rendu :

Ce qui précède présente quelques compétences pratiques de l'attribut border-radius en CSS3. la page, vous pouvez l'utiliser pour dessiner des graphiques simples. Les amis intéressés peuvent l'essayer eux-mêmes pour voir s'ils peuvent créer d'autres effets attrayants.

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!