Bagaimana untuk Mencipta Bawah Melengkung untuk DIV Menggunakan CSS?

Membengkokkan Bahagian Bawah DIV Ke Dalam dengan CSS

Untuk mencapai kesan bawah melengkung seperti yang digambarkan, satu teknik melibatkan penggunaan jejari sempadan dengan nilai tertentu. Begini cara untuk melaksanakannya:

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

Kod ini mencipta DIV segi empat tepat dengan tepi bawah bulat, seperti yang ditunjukkan:

Keluk Lutsinar

Sebagai alternatif, kecerunan jejari boleh digunakan untuk mencipta kelunturan lengkung:

body {
  background: pink;
}

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

Pendekatan ini menghasilkan bentuk biru separa lutsinar dengan bahagian bawah melengkung.
Atas ialah kandungan terperinci Bagaimana untuk Mencipta Bawah Melengkung untuk DIV Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!


						

Kenyataan Laman Web ini

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