A propriedade CSS shape-outside

Definição e uso

shape-outside A propriedade permite que você defina a forma de envolvimento do conteúdo alinhado. Pelo padrão, o conteúdo alinhado envolve a caixa de margem externa, e usando shape-outside，você pode personalizar essa maneira de envolvimento.

shape-outside A propriedade define a área flutuante do elemento flutuante. Essa área flutuante define a forma pela qual o conteúdo alinhado flutuante é envolto.

Exemplo

Faça o conteúdo alinhado orbitar a imagem em forma circular:

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

Experimente você mesmo

Sintaxe do CSS

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

Valor do atributo

Valor Descrição
nada Padrão. A área flutuante não é afetada. O conteúdo alinhado envolve a caixa de margem externa do elemento.
margin-box Define a forma envolvente cercada pela margem externa.
border-box Define a forma envolvente cercada pela margem do border.
padding-box Define a forma envolvente cercada pela margem interna.
content-box

Define a forma envolvente cercada pelas margens do conteúdo.

Cada canto deste retângulo tem um raio de 0 ou o maior valor entre border-radius - border-width - padding.
basic-shape A área flutuante é baseada na forma dos funções inset(), circle(), ellipse() ou polygon().
url(image) A área flutuante é baseada no canal alpha da imagem especificada, definida por shape-image-threshold.
inicial Defina essa propriedade para seu valor padrão. Veja inicial.
herdar Herda essa propriedade do elemento pai. Veja herdar.

Detalhes técnicos

Valor padrão: nada
Herança: não
Produção de animação: sim para basic-shape. Leia sobre animável
Versão: Módulo de Formas CSS Nível 1
Sintaxe do JavaScript: object.style.shapeOutside="circle(50%)"

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente essa propriedade pela primeira vez.

Chrome Edge Firefox Safari Ópera
37 79 62 10.1 24