Maison > Article > interface Web > Comment dessiner une forme d'éventail en CSS3
Comment dessiner une forme d'éventail en CSS3
- 藏色散人original
- 2021-01-13 10:37:395363parcourir
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; ".
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>Rendu :
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|%;
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!