Attribut shape-outside CSS

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%);
}

Essayez-le vous-même

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