Superellipse() - Fonction CSS

superellipse()

Résumé des caractéristiques de la fonction superellipse()

Description rapide
Définit un tracé d'ellipse à partir d'une seule valeur positive ou négative.
Statut
Problèmes de compatibilité ⚠
Type d'animation
Computed value : lors d'une animation, la propriété superellipse() passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Bordures et décorations
Références (W3C)
Statut du document: WD (document de travail)

Description de la fonction superellipse().

⚠
La fonction n'est pour l'instant ni reconnue par Firefox  , ni par Safari  .

superellipse() définit un quart d'ellipse plus ou moins arrondie. Elle est utilisable par les propriété de la famille corner-shape. La courbure de l'ellipse et définie par un seul paramètre, variant de moins l'infini à plus l'infini, conformément au dessin ci-dessous.

Paramètre de la fonction superellipse()
Tracé de l'angle en haut à droite en fonction
du paramètre de la fonction superellipse(n).

La valeur superellipse() peut être utilisée avec les propriétés suivantes :

  • corner-shape : Définit la forme des arrondis d'angle. Propriété résumée, il existe également une propriété spécifique à chacun des angles.

Syntaxes de la fonction superellipse().

  • corner-shape: superellipse(2);

    Lorsque le paramètre de superellipse() a une valeur positive, cela correspond à une ellipse convexe. Les valeurs négatives donnent une ellipse concave. Une valeur nulle revient à couper l'angle par une droite.

    Voici les équivalences entre valeurs prédéfinies de corner-shape et les valeurs numériques du paramètre de superellipse() :

    • squircle : valeur de 3.
    • round : valeur de 1.
    • bevel : valeur de 0.
    • scoop : valeur de -1.
    corner-shape:superellipse(2);
    corner-shape:superellipse(0);
    corner-shape:superellipse(-2);
  • corner-shape: superellipse(infinity); corner-shape: superellipse(-infinity);

    Le terme infinity est un mot réservé de CSS. Lorsqu'il est utilisé avec superellipse() en positif, il annule l'effet d'arrondi. En négatif il donne des carrés entrants.

    Ces valeurs sont équivalentes aux termes prédéfinis square et notch.

    corner-shape:superellipse(infinity);
    corner-shape:superellipse(-infinity);

Animation avec la fonction superellipse().

La fonction superellipse() peut être animée. Comme la valeur qu'elle attend est un nombre décimal, l'animation est très fluide.

Support de la fonction superellipse().

Colonne 1
Prise en charge par les navigateurs de la fonction superellipse() pour tracer les arrondis d'angles.
1
Fonction
superellipse()
Estimation de la prise en charge globale.
66%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Samsung Internet

Chrome

Edge

Androïd Brower

Chrome pour Androïd

Firefox

Firefox pour Androïd

KaiOS Browser

Opéra

Safari sur IOS

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse

Historique de la fonction superellipse().

Voir aussi, à propos des bordures.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété superellipse() fait partie du module CSS Borders and Box Decorations Module.
Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

⚠
corner-shape
Définit la forme des arrondis d'angle. Propriété résumée, il existe également une propriété spécifique à chacun des angles.