CSS didasarkan pada model kotak. Sekiranya anda mempunyai gambar yang berbentuk bulatan yang ingin anda membungkus teks, ia akan membungkus kotak pengikat gambar.
Bentuk-luar
Properti CSS baru yang disebut bentuk luar membolehkan anda membungkus teks yang sesuai dengan bentuk gambar anda.
Apa itu bentuk-luar
Shape-luar adalah harta CSS baru yang mengubah bentuk item yang dibungkus. Daripada dibatasi pada kotak pengikat segi empat tepat di sekitar gambar, bentuk luar membolehkan kita membentuk kandungan agar sesuai dengan gambar.
Inilah cara MDN menerangkan bentuk luar:
Yang bentuk-luar CSS hartanah menggunakan nilai bentuk untuk menentukan kawasan apungan untuk apungan dan akan menyebabkan kandungan sebaris untuk membalut di sekitar bentuk dan bukannya kotak bounding apungan ini.Penghapusan yang paling penting dari keterangan tersebut ialah harta baru ini digunakan untuk gambar yang menggunakan pelampung. Harta bentuk CSS di luar mengawal bagaimana teks membungkus gambar apungan apa pun. Teks yang dibungkus dapat berbentuk bulatan, elips, segi empat tepat atau poligon.
Menggunakan bentuk-luar
Properti bentuk-luar mengambil "bentuk dasar" dan menerapkan fungsi bentuk padanya. Fungsi bentuk digunakan untuk mengubah bentuk kawasan apungan bentuk. Properti bentuk luar CSS menyediakan fungsi untuk membuat fungsi bentuk ini:
- bulatan
- elips
- poligon
- segi empat tepat
- url
Gambar boleh diletakkan dengan nilai-nilai ini. Nilai ditambahkan hingga akhir:
- kotak margin
- kotak padding
- kotak sempadan
Gambar mesti mempunyai dimensi intrinsik. Anda mesti menetapkan ketinggian dan lebar elemen. Ini akan digunakan oleh fungsi bentuk untuk membuat sistem koordinat yang digunakan ketika membungkus teks di sekitar gambar.
Bulatan
Circle () adalah salah satu nilai fungsional yang disediakan dengan bentuk luar. Notasi penuh untuk bulatan () adalah bulatan (r pada cx cy) di mana r adalah jejari bulatan dan cx dan cy adalah koordinat bagi pusat bulatan. Sekiranya anda menghilangkannya, bahagian tengah gambar akan digunakan sebagai nilai lalai.
Berikut adalah contoh penggunaan bentuk-luar pada bulatan:
.circle { height: 200px; width: 200px; border-radius: 50%; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-shape-outside: circle(); shape-outside: circle();}Elips
Elips adalah variasi bulatan di mana item memanjang pada paksi mendatar atau menegak. Notasi penuh untuk elips () adalah elips (rx ry pada cx cy) di mana rx dan ry adalah jari-jari untuk elips dan cx dan cy adalah koordinat bagi pusat elips.
Berikut adalah contoh penggunaan bentuk luar pada elips:
.ellipse { width: 100px; height: 200px; border-radius: 50%; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-shape-outside: ellipse(50px 100px at 50% 50%); shape-outside: ellipse(50px 100px at 50% 50%);}Poligon
Fungsi poligon memberikan pelbagai bentuk yang tidak terhad. Notasi penuh untuk poligon () ialah poligon (x1 y1, x2 y2,…)di mana setiap pasangan menentukan koordinat xy untuk titik puncak poligon. Untuk menggunakan fungsi poligon () anda mesti menentukan minimum 3 pasang bucu.
Poligon digunakan dengan jalur klip. Properti CSS jalur klip membuat kawasan kliping yang menentukan bahagian elemen apa yang harus dipaparkan. Apa sahaja yang ada di dalam kawasan ini dipaparkan, sementara yang berada di luar disembunyikan.
Berikut adalah contoh penggunaan bentuk-luar untuk membuat dua bentuk segitiga dan teks mengalir di antara mereka:
.leftTriangle { width: 150px; height: 300px; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); -webkit-shape-outside: polygon(0% 0%, 100% 0%, 50% 100%); shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);}.rightTriangle { width: 150px; height: 300px; background-color: #7db9e8; margin: 0 0 5px 25px; float: right; -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); -webkit-shape-outside: polygon(0% 0%, 100% 0%, 50% 100%); shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);}Sokongan Penyemak Imbas
Bentuk CSS di luar terutamanya disokong oleh Chrome, Opera dan Safari.
Dapatkan Kod
Kod untuk semua contoh boleh didapati di repo github saya di sini.
Lebih Banyak Artikel
Terima kasih kerana membaca artikel saya. Sekiranya anda suka, sila klik ikon bertepuk di bawah ini supaya orang lain dapat menemui artikel tersebut. Berikut adalah beberapa lagi artikel saya yang mungkin anda minati:
Berikut adalah 5 Susun Atur yang Boleh Anda Buat Dengan FlexBox
Carian Pertama Breadth dalam JavaScript
Corak Instantiasi dalam JavaScript