Proprietà CSS shape-outside

Definizione e utilizzo

shape-outside L'attributo ti permette di definire la forma di avvolgimento del contenuto in linea. Per impostazione predefinita, il contenuto in linea è avvolto intorno al margine esterno del suo margine, ma puoi usarlo shape-outside, puoi personalizzare questo tipo di avvolgimento.

shape-outside L'attributo definisce l'area fluttuante dell'elemento fluttuante. Questa area fluttuante definisce la forma intorno alla quale il contenuto in linea fluttuante è avvolto.

Esempio

Far circondare il contenuto in linea intorno all'immagine in forma circolare:

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

Prova te stesso

Sintassi CSS

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

Valore dell'attributo

Valore Descrizione
nessuno Valore predefinito. L'area fluttuante non è influenzata. Il contenuto in linea è avvolto intorno al margine esterno dell'elemento.
margin-box Definisce la forma circondata dai margini esterni.
border-box Definisce la forma circondata dai margini esterni del bordo.
padding-box Definisce la forma circondata dai margini interni.
content-box

Definisce la forma circondata dai margini del contenuto.

Il raggio degli angoli di questa scatola è 0 o il valore maggiore tra border-radius, border-width e padding.
basic-shape L'area fluttuante è basata sulla forma definita dalla funzione inset(), circle(), ellipse() o polygon().
url(image) L'area fluttuante è basata sul canale alpha dell'immagine specificata, definita da shape-image-threshold.
initial Imposta questo attributo al suo valore predefinito. Vedi initial.
inherit Inherita questo attributo dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: nessuno
Inheritance: no
Produzione dell'animazione: sì per basic-shape. Leggi su animabile
Versione: Modulo CSS Shapes Livello 1
Sintassi JavaScript: object.style.shapeOutside="circle(50%)"

Supporto del browser

Le cifre nella tabella rappresentano la versione del browser che supporta completamente l'attributo per la prima volta.

Chrome Edge Firefox Safari Opera
37 79 62 10.1 24