Qu'est-ce que la ? A quoi ça sert ?

Qu'est-ce que la  ? A quoi ça sert ? Cet article vous présentera ce qu'est en CSS et quelles sont ses fonctions, afin que tout le monde puisse comprendre l'utilisation de . Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Introduction de base de

1. Quoi?

est un type de données CSS qui représente des graphiques de base, agissant sur les propriétés clip-path et shape-outside. [Recommandations du didacticiel vidéo associé : Tutoriel CSS3]

Le type de données peut être spécifié par la fonction de forme de base, c'est-à-dire que la fonction de forme de base peut être utilisée pour définissez la forme de base, veuillez voir ci-dessous. La section "Fonctions de forme de base" répertorie les valeurs possibles des fonctions de forme et leurs brèves descriptions.

La forme de base est ensuite transmise en tant que valeur aux propriétés (telles que la propriété shape-outside ou la propriété clip-path), qui sont utilisées pour appliquer des formes aux éléments afin de modifier le flux de contenu autour d'eux, ou pour découper l'élément pour définir des formes séparément.

2. Boîte de référence de forme

En plus de la hauteur et de la largeur de l'élément, la boîte du modèle de boîte de l'élément : margin box (marge -box), content-box (content-box), padding-box (padding-box) et border (border-box), peuvent également être utilisés comme référence pour spécifier la plage de forme sur un élément. Le cadre de référence peut être l’un des quatre cadres.

Lorsque est utilisé pour définir une forme, la boîte de référence est définie par chaque propriété à l'aide de la valeur (fonction de forme de base) (voir la section Exemples ci-dessous). L'origine du système de coordonnées de la forme de base est située dans le coin supérieur gauche du cadre de référence, l'axe des x se déplace vers la droite et l'axe des y s'étend vers le bas. Toutes les longueurs exprimées en pourcentages sont résolues à partir des dimensions utilisées de la boîte de référence (les longueurs définies en pourcentages seront redéfinies par le modèle de boîte associé aux dimensions utilisées). Si aucune zone de référence n'est spécifiée, la bordure est utilisée comme zone de référence pour la propriété clip-path et la bordure est utilisée pour la forme utilisée dans la propriété shape-outside.

2. Fonctions de forme de base

Voici les graphiques actuellement pris en charge par . Toutes les valeurs sont définies par des expressions de fonction et suivent la syntaxe de définition de valeur.

1. inset()

Syntaxe :

inset( <shape-arg>{1,4} [round <border-radius>] )

Explication : La fonction

inset() définit un insert rectangle.

Il nécessite 1 à 4 valeurs de décalage, qui pointent vers le décalage des bords et sommets de la boîte de référence intérieure (bordures et sommets supérieur, droit, inférieur et gauche). Ceux-ci spécifient la position du rectangle d'insertion dans l'élément.

Le paramètre facultatif est utilisé pour définir l'angle de l'arc inséré dans les sommets du rectangle.

2. circle()

circle( [<shape-radius>]? [at <position>]? )

La fonction circle() définit un cercle d'insertion

Le paramètre représente r, qui est le rayon du cercle. Les nombres négatifs ne sont pas acceptés comme valeur de ce paramètre. Le paramètre

définit la position du centre du cercle. La valeur par défaut est le centre du modèle de boîte.

3. ellipse()

ellipse( [<shape-radius>{2}]? [at <position>]? )

La fonction ellipse() définit une ellipse ; les paramètres

Les deux valeurs sont respectivement rx et ry, où rx représente le rayon dans la direction de l'axe x et ry représente le rayon dans la direction de l'axe y ; ce paramètre n'accepte pas les valeurs négatives. Le paramètre

définit la position du centre de l'ellipse. Sa valeur par défaut est le centre du modèle de boîte.

4. polygon()

polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

<shape-arg> = <length> | <percentage>

la fonction polygon() définit un polygone

règle de remplissage (règle de remplissage), c'est-à-dire comment remplir le polygone. Les valeurs facultatives sont différentes de zéro et même impaires. La valeur par défaut de ce paramètre est différente de zéro.

3. Description des formes de base

Valeurs calculées des formes de base

Les valeurs des fonctions de forme de base sont calculées comme spécifié, avec des exceptions telles que :

1 Les valeurs omises sont incluses et leurs valeurs par défaut sont calculées.

2. Une valeur circle() ou ellipse() calculée comme une paire de décalages (horizontal puis vertical) à partir de l'origine supérieure gauche, chaque décalage étant donné comme une combinaison de longueur absolue et pourcentage.

3. Un inset calcule la liste étendue des huit valeurs Les boîtes de référence pour les formes

sont définies dans le cadre des propriétés qui ont ces formes comme valeurs.

Interpolation de formes de base (animation entre formes)

Pour interpoler entre une forme de base et une deuxième forme de base, les règles suivantes s'appliquent. Les valeurs de la fonction shape sont insérées sous forme de simples listes. Les valeurs de la liste sont interpolées sous forme de longueur, de pourcentage ou de calcul lorsque cela est possible. Si les valeurs de la liste ne font pas partie de ces types mais sont identiques (par exemple, une valeur différente de zéro trouve la même position dans les deux listes), alors les valeurs sont interpolées.

1. Les deux formes doivent utiliser le même référentiel.

2. Si les deux formes sont du même type, ce type est ellipse() ou circle(), et aucun rayon n'utilise le mot-clé le plus proche ou le plus éloigné, alors dans la fonction de forme Interpoler entre chaque valeur.

3. Si les deux formes sont de type inset(), une interpolation est effectuée entre chaque valeur dans la fonction de forme.

4. Si les deux formes sont de type polygon(), alors les deux polygones ont le même nombre de sommets et sont interpolés entre chaque valeur dans la fonction de forme en utilisant la même

5. Dans tous les autres cas, aucune interpolation n'est spécifiée.

4. Compatibilité des navigateurs

Résumé : Ce qui précède représente l'intégralité du contenu de cet article. j'espère que cela sera utile à l'étude de chacun.

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!