Sifat shape-outside CSS

Definisi dan Penggunaan

shape-outside Atribut memungkinkan anda tentukan bentuk pengepungan kandungan rata. Secara lalai, kandungan rata di sekeliling kotak luar marjin, dan dengan shape-outside, dan anda boleh bentuk cara pengepungan ini sendiri.

shape-outside Atribut menentukan kawasan apung elemen apung. Kawasan apung ini menentukan bentuk yang dihalau kandungan rata di sekeliling elemen apung.

Contoh

Buatkan kandungan rata di sekeliling imej dalam bentuk bulatan:

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

Cuba Sendiri

Rumus CSS

shape-outside: none|margin-box|border-box|padding-box|content-box|basic-shape|url(imej)|asal|mewarisi;

Nilai atribut

Nilai Penerangan
tidak ada Nilai lalai. Kawasan apung tidak dirosakkan. Kandungan rata di sekeliling kotak luar marjin elemen.
margin-box Tentukan bentuk yang dihalau oleh latar belakang luar marjin.
border-box Tentukan bentuk yang dihalau oleh latar belakang luar border.
padding-box Tentukan bentuk yang dihalau oleh latar belakang luar margin.
content-box

Tentukan bentuk yang dihalau oleh latar belakang kandungan.

Jambatan setiap sudut kotak ini adalah 0 atau nilai yang terbesar daripada border-radius - border-width - padding.
basic-shape Kawasan apung berdasarkan bentuk yang ditakrifkan oleh fungsi inset(), circle(), ellipse() atau polygon().
url(imej) Kawasan apung berdasarkan alfa channel imej yang ditentukan, ditakrifkan oleh shape-image-threshold.
asal Tetapkan atribut ini ke nilai lalai. Lihat asal.
mewarisi Mewarisi atribut ini daripada elemen bapa. Lihat mewarisi.

Perincian Teknik

Nilai lalai: tidak ada
Ketergantungan: Tidak
Pembuatan Animasi: ya untuk basic-shape. Baca tentang animatable
Versi: Modul Bentuk CSS Level 1
Rumus JavaScript: object.style.shapeOutside="circle(50%)"

Pendukung Pelayar

Terdapat nombor di dalam tangah tabel yang menunjukkan versi penuh penggunaan perekaan ini oleh pelayar.

Chrome Edge Firefox Safari Opera
37 79 62 10.1 24