Comment dessiner une forme d'éventail en CSS3-tutoriel CSS-php.cn

Comment dessiner une forme d'éventail en CSS3

藏色散人

Libérer： 2022-12-30 11:11:40

original

5388 Les gens l'ont consulté

Comment dessiner une forme d'éventail en CSS3 : créez d'abord un exemple de fichier HTML ; puis ajoutez l'attribut border-radius au div spécifié ; et enfin définissez l'attribut composite tel que "border-radius:80px 0 0; ".

Comment dessiner une forme d'éventail en CSS3

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

Le CSS est devenu de plus en plus puissant. Vous pouvez l'utiliser pour dessiner diverses formes simples, qui peuvent être utilisées pour remplacer l'affichage d'images. Ce partage est principalement utilisé pour dessiner des cercles et des secteurs. pour les utiliser, CSS dessine une forme d'éventail.

Dessiner une forme d'éventail via CSS :

<html>
<head>
<style type="text/css">
div{
 border-radius:80px 0 0;
  width: 80px;
  height: 80px;
  background: #666;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Copier après la connexion

Rendu :

Comment dessiner une forme déventail en CSS3

Principe de mise en œuvre : Le coin supérieur gauche est arrondi, et le les trois autres coins sont arrondis. Il s'agit d'un angle droit : la valeur du coin supérieur gauche est la même que la largeur et la hauteur, et les valeurs des trois autres coins restent inchangées (égales à 0).

L'attribut border-radius est un attribut composite qui peut spécifier jusqu'à quatre attributs border -*- radius

Syntaxe :

border-radius: 1-4 length|% / 1-4 length|%;

Copier après la connexion

L'ordre des quatre valeurs pour chaque rayon est : coin supérieur gauche, coin supérieur droit, coin inférieur droit, coin inférieur gauche. 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.

Valeur de l'attribut :

longueur définit la forme de la courbe.

% Utilisez % pour définir la forme des coins.

Recommandé : Tutoriel vidéo CSS

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!