Attribut shape-outside CSS
- Page précédente scrollbar-color
- Page suivante @starting-style
Définition et utilisation
shape-outside
L'attribut vous permet de définir la forme d'enveloppe pour le contenu en ligne. Par défaut, le contenu en ligne est enveloppé autour de sa boîte de marge externe, et en utilisant shape-outside
, vous pouvez personnaliser ce type d'enveloppe.
shape-outside
L'attribut définit la zone flottante de l'élément flottant. Cette zone flottante définit la forme autour de laquelle le contenu en ligne flottant est enveloppé.
Exemple
Faites tourner le contenu en ligne autour de l'image en cercle :
img { float: left; clip-path: circle(40%); shape-outside: circle(45%); }
Syntaxe CSS
shape-outside: none|margin-box|border-box|padding-box|content-box|basic-shape|url(image)|initial|hérité;
Valeur de l'attribut
Valeur | Description |
---|---|
Aucun | Valeur par défaut. La zone flottante n'est pas affectée. Le contenu en ligne est enveloppé autour de la boîte de marge externe de l'élément. |
margin-box | Définir la forme entourée par les marges externes. |
border-box | Définir la forme entourée par les bords. |
padding-box | Définir la forme entourée par les bords internes. |
content-box |
Définir la forme entourée par les bords du contenu. Le rayon de chaque coin de cette boîte est de 0 ou la plus grande valeur entre border-radius - border-width - padding. |
basic-shape | La zone flottante est basée sur la forme définie par les fonctions inset(), circle(), ellipse() ou polygon(). |
url(image) | La zone flottante est basée sur le canal alpha de l'image spécifiée, définie par shape-image-threshold. |
initial | Réinitialise cette propriété à sa valeur par défaut. Voir initial. |
hérité | Inherited this property from its parent element. Voir hérité. |
Détails techniques
Valeur par défaut : | Aucun |
---|---|
Héritabilité : | Non |
Réalisation de l'animation : | oui pour basic-shape. Lire à propos des animables |
Version : | Module de formes CSS niveau 1 |
Syntaxe JavaScript : | object.style.shapeOutside="circle(50%)" |
Support du navigateur
Les nombres dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.
Chrome | Edge | Firefox | Safari | Opéra |
---|---|---|---|---|
37 | 79 | 62 | 10.1 | 24 |
- Page précédente scrollbar-color
- Page suivante @starting-style