Atribut shape-outside CSS

Definisi dan penggunaan

shape-outside Atribut ini memungkinkan Anda mendefinisikan bentuk pengelilingan konten dalam. Secara default, konten dalam diatur mengelilingi kotak luar margin, dan dengan menggunakan shape-outside, Anda dapat menyesuaikan cara pengelilingan ini.

shape-outside Atribut ini mendefinisikan area floating elemen floating. Area floating ini mendefinisikan bentuk yang diiringi konten dalam elemen floating.

Contoh

Biarkan konten dalam mengelilingi gambar dalam bentuk lingkaran:

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

Coba sendiri

Syntaks CSS

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

Nilai atribut

Nilai Deskripsi
none Nilai default. Area floating tidak terpengaruh. Konten dalam diatur mengelilingi kotak luar margin elemen.
margin-box Mendefinisikan bentuk yang diiringi oleh batas luar margin.
border-box Mendefinisikan bentuk yang diiringi oleh batas luar border.
padding-box Mendefinisikan bentuk yang diiringi oleh batas luar padding.
content-box

Mendefinisikan bentuk yang diiringi oleh batas konten.

Jari kotak ini untuk setiap sudut adalah 0 atau nilai yang paling besar di antara border-radius - border-width - padding.
basic-shape Area floating berdasarkan bentuk yang didefinisikan oleh fungsi inset(), circle(), ellipse(), atau polygon().
url(image) Area floating berdasarkan alpha channel gambar yang ditentukan, didefinisikan oleh shape-image-threshold.
initial Atur atribut ini ke nilai default. Lihat initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit.

Detil teknis

Nilai default: none
Inheritance: tidak
Pembuatan animasi: ya untuk basic-shape. Baca tentang animatable
Versi: Modul CSS Shapes Level 1
Syntaks JavaScript: object.style.shapeOutside="circle(50%)"

Dukungan Browser

Tabel yang ada di dalamnya menunjukkan versi browser yang pertama kali mendukung sifat ini.

Chrome Edge Firefox Safari Opera
37 79 62 10.1 24