Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Membuat Balutan Teks Di Sekitar Div Bulat?

Bagaimanakah Saya Boleh Membuat Balutan Teks Di Sekitar Div Bulat?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-11-16 03:14:02302semak imbas

How Can I Make Text Wrap Around a Rounded Div?

Meningkatkan Div Bulat untuk Mengandungi Teks

Banyak projek memerlukan div bulat untuk mengandungi teks dengan lancar. Walau bagaimanapun, secara lalai, div bulat sering meninggalkan teks kelihatan berbentuk segi empat sama. CSS menawarkan penyelesaian untuk menangani isu ini.

Shape-Outside: A Modern Approach

Sifat luar bentuk membolehkan untuk membungkus kandungan sebaris di sekeliling bentuk bukan segi empat tepat. Ia membolehkan pereka bentuk menyesuaikan pembalut, termasuk di sekeliling objek dan bulatan yang kompleks. Sokongan penyemak imbas untuk bentuk luar perlu dipertimbangkan.

Teknik Kecerunan dan Unsur Pseudo

Gabungan kecerunan jejari dan unsur pseudo boleh mencipta kawasan berbentuk bulatan yang menolak teks. Mulakan dengan kotak segi empat sama dan gunakan empat unsur pseudo terapung dengan kecerunan jejari yang dilukis di luar pusat bulatan. Laraskan kecerunan untuk meliputi kawasan yang diperlukan.

Sebagai contoh, kod CSS dan HTML berikut mencapai kesan yang diingini:

div {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  background: #333;
}

div:before {
  content: '';
  float: left;
  clear: left;
  height: 5em;
  width: 5em;
  background: radial-gradient( circle at bottom right, transparent 69%, red 69%);
}

div:after {
  content: '';
  float: right;
  clear: right;
  height: 5em;
  width: 5em;
  background: radial-gradient( circle at bottom left, transparent 69%, red 69%);
}
<div>
  <div class="shape"></div>
  <div class="shape">

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Balutan Teks Di Sekitar Div Bulat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn