Bagaimanakah Saya Boleh Mencipta Tepi Bawah Melengkung dalam DIV Menggunakan CSS?

Buat Tepi Bawah Melengkung dalam DIV Menggunakan CSS

Untuk mencapai tepi bawah melengkung yang diingini pada div segi empat tepat, ikut langkah berikut:

Menggunakan jejari sempadan

Harta jejari sempadan boleh mencipta sudut bulat. Dengan menentukan nilai jejari yang berbeza-beza untuk sudut atas dan bawah, anda boleh mencipta tepi bawah melengkung.

.curved {
  margin: 0 auto;
  height: 400px;
  background: lightblue;
  border-radius: 0 0 200px 200px;  
}

Menggunakan Kecerunan Jejari

Jika anda lebih suka melengkung lutsinar bentuk, anda boleh menggunakan kecerunan jejari:

body {
  background: pink;
}

.container {
  margin: 0 auto;
  width: 500px;
  height: 200px;
  background: radial-gradient(110% 50% at bottom, transparent 50%, lightblue 51%);
}

Kaedah ini menyediakan dua cara berbeza untuk mencapai tepi bawah melengkung yang diingini, membolehkan anda menyesuaikan kesan untuk memenuhi keperluan reka bentuk anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Tepi Bawah Melengkung dalam DIV Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!