Bagaimana untuk Membuat Balutan Teks Di Sekitar Div Bulat dengan CSS?

Cara Menyimpan Teks Di Dalam Div Bulat Menggunakan CSS

Dalam soalan ini, pengguna ingin mempunyai div bulat dengan teks di dalamnya, seperti yang dilihat dalam imej yang disediakan . Walau bagaimanapun, teks dalam div bulat pengguna kelihatan dimatikan.

Menggunakan CSS

Untuk mencapai kesan yang diingini menggunakan CSS, pengguna boleh mempertimbangkan pilihan berikut:

1. Menggunakan bentuk luar

Harta ini membenarkan penyesuaian pembalut kandungan sebaris di sekeliling bentuk bukan segi empat tepat. Ia merupakan penyelesaian moden dengan sokongan penyemak imbas yang baik, seperti yang dinyatakan dalam dokumentasi Rangkaian Pembangun Mozilla.

2. Mencipta Bentuk dengan Kecerunan Latar Belakang

Untuk div bulat, anda boleh mencipta bahagian kecerunan jejari untuk menjadikan teks melilit di sekelilingnya. Berikut ialah contoh:

div:not([class]) {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  background: #333;
}

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

div[class][id]:before {
  background: radial-gradient(circle at top right, transparent 69%, red 69%);
}

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

div[class][id]:after {
  background: radial-gradient(circle at top left, transparent 69%, red 69%);
}

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