Atrybut shape-outside w CSS

Definicja i użycie

shape-outside Atrybut pozwala na zdefiniowanie kształtu otaczania zawartości wewnętrznej. Domyślnie, zawartość wewnętrzna otaczana jest zewnętrznymi marginesami, a za pomocą shape-outside, możesz dostosować ten sposób otaczania.

shape-outside Atrybut definiuje obszar pływający elementu pływającego. Ten obszar pływający definiuje kształt, wokół którego zawartość pływająca jest otaczana.

Przykład

Otocz treść wewnętrzną wokół obrazu w kształcie okrągłym:

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

Spróbuj sam

Gramatyka CSS

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

Wartość atrybutu

Wartość Opis
brak Domyślne. Obszar pływający nie jest afectowany. Wewnętrzna zawartość otaczana jest marginesami zewnętrznymi elementu.
margin-box Definiuje kształt otoczony zewnętrznymi krawędziami marginesów.
border-box Definiuje kształt otoczony zewnętrznymi krawędziami ramki.
padding-box Definiuje kształt otoczony zewnętrznymi krawędziami wewnętrznych marginesów.
content-box

Definiuje kształt otoczony krawędziami zawartości.

Każdy róg tego okręgu ma promień 0 lub większą wartość z border-radius, border-width i padding.
basic-shape Obszar pływający oparty na kształcie zdefiniowanym przez funkcje inset(), circle(), ellipse() lub polygon().
url(image) Obszar pływający oparty na kanale alfa określonego obrazu, zdefiniowanym przez shape-image-threshold.
initial Ustaw tę właściwość na jej wartość domyślną. Zobacz initial.
inhered Dziedziczy tę właściwość od elementu nadrzędnego. Zobacz inhered.

Szczegóły techniczne

Domyślna wartość: brak
Inheredność: nie
Tworzenie animacji: tak dla basic-shape. Przeczytaj o animowalnych
Wersja: Moduł CSS Shapes Poziom 1
Gramatyka JavaScript: object.style.shapeOutside="circle(50%)"

Wspieranie przeglądarek

Tabela zawiera wersje przeglądarek, które w pełni wspierają tę właściwość.

Chrome Edge Firefox Safari Opera
37 79 62 10.1 24