Bagaimanakah Saya Boleh Membuat Balutan Teks Di Sekitar Div Bulat?

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!