CSS Shapes est un module de spécification CSS qui décrit les formes géométriques. Selon le niveau 1 de cette spécification, les formes CSS peuvent être appliquées aux éléments flottants. Cette spécification définit différentes façon permettant de définir la forme d'un élément flottant afin que les lignes « coulent » autour de la forme plutôt qu'autour du rectangle formé par la boîte de l'élément.

Exemple simple

Dans l'exemple qui suit, on a une image qui flotte à gauche et la propriété shape-outside qui lui est appliquée vaut circle(50%). Ceci crée une forme circulaire autour de laquelle le contenu peut s'inscrire. Les boîtes des lignes pour le texte qui entourent l'image sont donc modifiées.

Référence

Propriétés

Types de donnée

Guides

Ressources externes

Spécifications

Spécification État Commentaires
CSS Shapes Module Level 1 Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

shape-outside

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple37 ?611 Non2410.1
<image>37 ?611 Non2410.1
<gradient>37 ?611 Non2410.1
inset()37 ?611 Non2410.1
circle()37 ?611 Non2410.1
polygon()37 ?611 Non2410.1
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple3737 ?6112410.34.0
<image>3737 ?6112410.34.0
<gradient>3737 ?6112410.34.0
inset()3737 ?6112410.34.0
circle()3737 ?6112410.34.0
polygon()3737 ?6112410.34.0

1. From version 61: this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

shape-margin

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple37 ?611 Non2410.1 -webkit-
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple3737 ?6112410.34.0

1. From version 61: this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

shape-image-threshold

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple37 ?611 Non2410.1
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple3737 ?6112410.34.0

1. From version 61: this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, xdelatour
Dernière mise à jour par : SphinxKnight,