CSS shape-outside-Eigenschaft

Definition und Verwendung

shape-outside Das Attribut ermöglicht es Ihnen, die Form der Umhüllung für Inline-Inhalte zu definieren. Standardmäßig werden Inline-Inhalte um ihren Außenabstandsumfang umgeben, und mit shape-outside, und Sie können diese Art der Umhüllung anpassen.

shape-outside Das Attribut definiert den flottierenden Bereich des flottierenden Elements. Dieser flottierende Bereich definiert die Form, die von den inline flottierenden Elementen umgeben wird.

Beispiel

Lassen Sie das Inline-Inhalt um das Bild in runder Form umlaufen:

img {
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}

Versuchen Sie es selbst

CSS-Syntax

shape-outside: none|margin-box|border-box|padding-box|content-box|basic-shape|url(image)|initial|inherit;

Attributwert

Wert Beschreibung
keine Standardwert. Die flottierende Fläche wird nicht beeinflusst. Inline-Inhalte werden um den Außengitterrahmen des Elements umgeben.
margin-box Definiert die Form, die von den Außenabständen außerhalb umgeben ist.
border-box Definiert die Form, die von den Rahmenkanten außerhalb umgeben ist.
padding-box Definiert die Form, die von den Innenabständen außerhalb der Kanten umgeben ist.
content-box

Definiert die Form, die von den Inhaltskanten umgeben ist.

Die Kantenradien dieses Rahmens betragen 0 oder den größeren Wert von border-radius - border-width - padding.
basic-shape Die flottierende Fläche basiert auf der Form der Funktionen inset(), circle(), ellipse() oder polygon().
url(image) Die flottierende Fläche basiert auf dem Alpha-Kanal der angegebenen Abbildung und wird durch shape-image-threshold definiert.
initial Dieses Attribut auf seinen Standardwert setzen. Siehe initial.
inherit Dieses Attribut wird von seinem übergeordneten Element geerbt. Siehe inherit.

Technische Details

Standardwert: keine
Vererbbarkeit: Nein
Animationserstellung: ja für basic-shape. Mehr über animatable lesen
Version: CSS Shapes Modul Level 1
JavaScript-Syntax: object.style.shapeOutside="circle(50%)"

Browser-Unterstützung

Tabelle-Zahlen stellen die erste vollständige Unterstützung der Browser-Version für dieses Attribut dar.

Chrome Edge Firefox Safari Oper
37 79 62 10.1 24