Bentuk-luar - Trik CSS

Anonim

The shape-outsidekawalan harta bagaimana kandungan akan membungkus bounding-kotak unsur diapungkan ini. Biasanya ini supaya teks dapat mengalir kembali bentuk seperti bulatan, elips atau poligon:

.element ( float: left; shape-outside: circle(50%); width: 200px; height: 200px; )

Penting untuk diperhatikan bahawa harta tanah ini hanya akan berfungsi pada elemen terapung buat masa ini, walaupun kemungkinan ini akan berubah pada masa akan datang. The shape-outsidehartanah juga boleh dimanipulasi dengan peralihan atau animasi.

Nilai

  • circle(): untuk membuat bentuk bulat.
  • ellipse(): untuk membuat bentuk elips.
  • inset(): untuk membuat bentuk segi empat tepat.
  • polygon(): untuk membuat sebarang bentuk dengan 3 atau lebih bucu.
  • url(): mengenal pasti gambar mana yang harus digunakan untuk membungkus teks.
  • initial: kawasan apungan tidak terjejas.
  • inherit: mewarisi shape-outsidenilai daripada ibu bapa.

Nilai berikut mengenal pasti rujukan model kotak mana yang harus digunakan untuk meletakkan bentuk dalam:

  • margin-box
  • padding-box
  • border-box

Nilai-nilai ini perlu dilampirkan ke akhir, misalnya: shape-outside: circle(50% at 0 0) padding-box. Secara lalai, margin-boxrujukan akan digunakan.

elips ()

.element ( shape-outside: ellipse(150px 300px at 50% 50%); )

Yang ellipse()fungsi memerlukan nilai-nilai jejari bagi x, y paksi elips diikuti oleh koordinat untuk meletakkan pusat bentuk dalam kotak sempadan itu. Contohnya contoh di atas akan meletakkan pusat elips di tengah menegak dan mendatar .elementdiv:

Walaupun demo di atas mungkin menunjukkan bahawa kita mengubah bentuknya divsendiri, jika kita menambah sempadan dan gambar latar kita akan mendapati bahawa kotak pengikat sebenarnya masih berbentuk segi empat tepat:

Mungkin lebih baik memikirkannya dengan cara ini: dengan shape-outsidesifat kita mengubah hubungan elemen lain di sekitar elemen, bukan geometri elemen itu sendiri. Untuk memperbaikinya, kami perlu menggunakan di shape-outsidesamping clip-path()harta tanah, seperti dalam contoh ini:

bulatan ()

.element ( shape-outside: circle(50%); )

Fungsi ini membuat bulatan, dan dalam contoh kod di atas, ia akan membuat bulatan dengan jari-jari yang separuh tinggi dan lebarnya .element. Yang circle()fungsi juga boleh menggunakan sintaks yang sama untuk meletakkan bentuk dalam.

url ()

.element ( shape-outside: url('circle.png.webp'); )

Dalam contoh ini, kami mempunyai dua gambar terapung, satu di kedua sisi blok teks. Oleh kerana kedua-dua gambar mempunyai shape-outsidesifat yang ditetapkan maka teks di bawahnya akan mengelakkan kedua-dua terapung tersebut.

Anda juga boleh menetapkan shape-image-thresholdsifat yang akan memberitahu penyemak imbas piksel mana, bergantung pada ketelusannya, yang harus dibuat bentuknya. Sebagai contoh:

.element ( shape-outside: url('image.png.webp'); shape-image-threshold: 0.5; )

Dalam contoh ini, satu-satunya piksel yang akan menghasilkan bentuk mesti mempunyai ketelusan 50% ke atas. Nilai dari 0.0(telus) hingga 1.0(legap) adalah sah.

poligon ()

.element ( shape-outside: polygon(0 0, 0 200px, 300px 600px); )

Fungsi ini menghasilkan bentuk yang mempunyai tiga atau lebih bucu, misalnya:

Penting untuk diperhatikan bahawa jika harta tanah ini akan dianimasikan, ia memerlukan bilangan bucu yang sama semasa anda menyatakan keadaan animasi:

.element ( shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: shape-outside 1s; ) .element:hover ( shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%); )

sisipan ()

.element ( shape-outside: inset(100px 100px 100px 100px 10px); /* shape-outside: inset(top right bottom left border-radius); */ )

inset()adalah fungsi untuk membuat bentuk segi empat tepat, memerlukan lima parameter tetapi yang kelima, kerana border-radiusadalah pilihan. Hujah-hujah yang lain adalah ofset dari arah tepi .element:

Di atas kita mempunyai elemen selebar 200px hingga 200px tinggi dan kita mengimbangi bentuknya menjadi 50px ke setiap arah kecuali sisi kiri. Dengan cara ini teks akan membungkus di atas bentuk walaupun div memanjang ke atas.

Sokongan penyemak imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome Firefox IE Hujung Safari
37 62 Tidak 79 7.1 *

Mudah Alih / Tablet

Android Chrome Android Firefox Android Safari iOS
88 85 81 8 *