Circle() - Fonction CSS
Résumé des caractéristiques de la fonction circle()
Schéma syntaxique de circle()
.
circle()
Les liens du schéma donnent accès à plus de détails
Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :
length (r)
est une valeur numérique positive ou null, suivie d'une des unités de dimension.length (x)
etlength (y)
sont des valeurs numériques, suivies d'une unité de dimension.
Description de la fonction circle()
.
La fonction circle()
définit un cercle, qui pourra être utilisé de plusieurs façons,
suivant la propriété qui fait appel à cette fonction.
circle()
permet de préciser le rayon du cercle, ainsi que son centre par rapport à l'élément.
Ce cercle pourra être utilisé pour découper un élément (pour faire des images rondes par exemple) ou pour ajuster ou aligner un texte sur une portion de cercle.
La fonction
circle()
utilisée avec la propriété
clip-path
découpe l'élément suivant
un cercle.
La fonction
circle()
utilisée avec la propriété
clip-path
découpe l'élément suivant un cercle.
Des parties de l'élément sont masquées.
La fonction
circle()
utilisée avec la propriété
shape-outside
forme l'habillage suivant un cercle.
L'élément vert est flottant.
La fonction
circle()
utilisée avec la propriété
shape-outside
forme l'habillage suivant un cercle.
La valeur circle()
peut être utilisée avec les propriétés suivantes :
clip-path
: Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...).shape-outside
: Définit la forme du contournement du texte pour un élément flottant.
Syntaxes de la fonction circle()
.
- clip-path: circle(50px); r
r
est le rayon du cercle. C'est une valeur numérique suivie d'une unité de dimension relative ou absolue (voir les unités de dimension). Les pourcentages sont calculés par rapport à la plus grande des dimensions de l'élément (largeur ou hauteur).r
accepte également les valeurs prédéfinies suivantes :farthest-side
: le rayon est égal à la distance depuis le centre du cercle jusqu'au bord le plus éloigné,
closest-side
: le rayon est égal à la distance depuis le centre du cercle jusqu'au bord le plus proche.
Effet de la valeurclosest-side
Effet de la valeurfarthest-side
Si aucune valeur n'est précisée, la fonction
circle()
prend pour valeur par défautclosest-side
. - clip-path: circle(50px at 20% 30%); r x y
x
ety
sont introduits pas le motat
. Ils indiquent les coordonnées du centre du cercle, mesurées par rapport au bord gauche et au bord supérieur de l'élément.x
ety
sont des valeurs numériques suivies d'une unité de dimension relative ou absolue (voir les unités de dimension). S'il s'agit de pourcentages, ces derniers sont calculés par rapport à la largeur de l'élément pourx
et par rapport à la hauteur de l'élément poury
.Les valeurs négatives sont autorisées et positionnent le centre du cercle en dehors de l'élément.
x
ety
acceptent aussi les valeurs prédéfinies suivantes :
left
,center
ouright
pourx
ettop
,center
oubottom
poury
.Pour ces deux paramètres, la valeur par défaut est
center
.
Animation avec la fonction circle()
.
Voici un petit amusement qui imite le déplacement d'un spot de lumière dévoilant partiellement le logo CSS3.
Il y a en fait deux images superposées ; celle de dessous est fortement assombrie, tandis que celle de dessus est découpée
avec la propriété clip-path
et la fonction circle()
dont les paramètres sont animés.


Simulateur avec la fonction circle()
L'image ci-dessous mesure 400 pixels en largeur et 300 pixels en hauteur. Jouez avec les paramètres de la fonction circle()
pour bien en comprendre le
fonctionnement. La même image (mais atténuée) a été placée derrière l'image principale, ce qui explique que les parties cachées continuent d'être visibles.
Ce n'est donc pas le fait de la propriété clip-path
utilisée avec la fonction circle()
, qui elle, fait disparaître complètement les parties
découpées.


Support de la fonction circle()
.
Aucun problème de compatibilité n'est à signaler avec les navigateurs récents ou couramment utilisés.
clip-path
, shape-outside
, etc.circle()
pour tracer un cercle.géométriques
circle()
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

Opéra

Samsung Internet

Chrome

Safari

Firefox

Safari sur IOS

Edge

Androïd Brower

Firefox pour Androïd

Chrome pour Androïd

KaiOS Browser

Opéra mini
Historique de la fonction circle()
.
-
Module CSS - Formes de base - Niveau 1
Définition de la fonctioncircle()
.20 Juin 2013Document de travail.20 Mars 2014Candidat à la recommandation.
Voir aussi, dans le même module de standardisation que circle().
Les spécifications CSS éditées par le W3C sont organisées en modules. circle()
fait partie du "module CSS - Formes de base" (CSS Shapes Module).
Les définitions suivantes sont également décrites dans ce même module.