Bagaimana untuk Mencipta Sempadan Div Berbentuk Tidak Sekata dengan CSS?

Menyesuaikan Jejari Sempadan Div untuk Lengkung Tidak Sekata

Soalan:

Bagaimana anda boleh mencapai sisi bulat yang tidak sekata pada div yang menyimpang daripada jejari sempadan biasa bentuk?

Penyelesaian:

Walaupun jejari sempadan membenarkan sudut bulat, mencipta lengkung yang tidak sekata memerlukan pendekatan yang berbeza. Berikut ialah penyelesaian menggunakan CSS clip-path:

.box {
  height: 200px;
  width: 200px;
  background: blue;
  clip-path: circle(75% at 65% 10%);  // Customize the shape here
}

Sifat clip-path menggunakan fungsi bulat untuk mentakrifkan bentuk kawasan keratan. Ini membolehkan anda menentukan peratusan dan kedudukan bulatan, menghasilkan div bulat yang tidak sekata. Dalam contoh yang disediakan:

• bulatan(75%): Mentakrifkan jejari bulatan sebagai 75% daripada saiz div.
• pada 65% 10%: Letakkan pusat bulatan pada 65% pada paksi mengufuk dan 10% pada menegak paksi.

Dengan melaraskan parameter ini, anda boleh mencipta bentuk div yang unik dan kompleks.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Sempadan Div Berbentuk Tidak Sekata dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!